0
我使用bootstrap创建网页布局，后端是Laravel，网页分区为各种屏幕设备上正常工作的各种div，但是当我上传项目时服务器和查看页面的移动部分的服务和联系人部分隐藏在白色背景下，我发现很难弄清楚CSS代码中的问题,,,请协助？在移动设备中隐藏在白色背景中的div
代码
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url("../fonts/pacifico.woff") format('woff');
}
html,
body {
margin: 0;
padding: 0;
}
img,
object,
embed,
video {
max-width: 100%;
height: auto;
}
/*Service section*/
.service-heading {
font-size: 22px;
}
#service {
background: url(../img/bg/number1.gif) repeat center center fixed;
color: #ffffff;
display: block;
}
#service h3,
p {
color: #ffffff;
}
#service .block-heading h1 {
color: #fff;
font-family: 'Milonga', cursive;
font-weight: 400;
font-size: 55px;
word-spacing: 5px;
}
/*Contact section*/
#contact {
background: url(../img/bg/contact-bg.jpg) no-repeat center center fixed;
background-size: cover;
color: #fff;
}
#contact .block-heading h1 {
color: #fff;
font-family: 'Milonga', cursive;
font-weight: 400;
font-size: 55px;
}
.overlay-3 {
padding: 60px 0;
/* background-color: rgba(9, 20, 39, 0.83); */
/* background-color: rgba(24, 77, 77, 0.93); */
background-color: rgba(33, 103, 88, 0.9);
}
.contact-info {
padding: 16px 62px;
text-align: left;
font-size: 18px;
line-height: 36px;
margin-top: 25px;
}
. .contact-info i {
width: 40px;
height: 40px;
color: white;
padding-top: 7px;
font-size: 25px;
border: 1px solid #fff;
text-align: center;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
}
.contact-info p {
padding: 27px 10px;
}
.contact-info span {
padding-left: 20px;
}
input[type="text"],
input[type="email"],
textarea {
display: block;
margin: 0 auto;
width: 100%;
background: transparent;
border: 1px solid #fff;
padding: 12px 15px;
margin-bottom: 30px;
}
input[type="submit"] {
background: transparent;
border: 1px solid #fff;
width: 100%;
padding: 10px;
transition: 0.5s background linear;
font-weight: bold;
}
input[type="submit"]:hover {
background: #fff;
border-color: #fff;
transition: 0.5s background linear;
color: #333;
}
::-webkit-input-placeholder {
color: #fff;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
@media only screen and (min-width: 321px) and (max-width: 480px) {
#service {
display: inline-block;
height: 100%;
width: 100%;
padding-bottom: 20px;
background: blue;
}
.overlay-3 {
background: none;
padding: 0;
}
#contact {
display: inline-block;
height: 100%;
width: 100%;
}
}<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
<meta name="HandheldFriendly" content="true">
<link rel="icon" type="image/x-icon" href="img/favicon.ico"> >
<link href="{{ asset('css/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('css/bootstrap/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
<!-- google font -->
<link href='http://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet'>
</head>
<body>
<!-- Service Section -->
<div class="content-block" id="service">
<br><br>
<header class="block-heading cleafix text-center">
<h1> Services</h1>
<!-- <p>Lorem Ipsum Text</p> -->
</header>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h3 class="section-subheading text-muted"> Welcome </h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School Of Arts</h4>
<p>...............</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">School of Business </h4>
<p> ........... </p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-code fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School of Engineering </h4>
<p> ........ </p>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-wordpress fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School of Human Resource</h4>
<p> ........ </p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School of Medicine </h4>
<p> ........ .......</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-thumbs-up fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading"> School of Biological Sciences </h4>
<p> .......... </p>
</div>
</div>
</div>
</div>
<!-- END SERVICE SECTION-->
<!-- Contact Form Section-->
<div class="content-block" id="contact">
<div class="overlay-3">
<header class="block-heading cleafix text-center">
<h1>Contact</h1>
<!-- <p>Feel Free to Contact</p> -->
</header>
<div class="block-content text-center">
<div class="container-fluid">
<div class="row">
<!-- Form Section -->
<div class="col-sm-4 wow animated fadeInLeft">
{!! Form::open(array('route' => 'index.post', 'method' => 'POST','class' => 'contact-form')) !!} {{ Form::text('name', null, array('placeholder' => 'Name...', 'class' => 'input', 'required' => ''))}} {{ Form::email('email', null, array('placeholder'
=> 'Email Address...','class' => 'input', 'required' => ''))}} {{ Form::textarea('message', null, array('placeholder' => 'Message...', 'class' => '', 'required' => 'input')) }} {{ Form::submit('Submit') }} {!! Form::close() !!}
</div>
<!-- Adress -->
<div class="col-sm-4 wow animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="contact-info">
<div class="clearfix">
<div class="rotated-icon">
<div class="sqaure-nebir"></div>
<i class="fa fa-map-marker"></i>
</div>
<p><strong> 3069 Nkr</strong> </p>
</div>
<div class="tel clearfix">
<div class="rotated-icon">
<div class="sqaure-nebir"></div>
<i class="fa fa-mobile"></i>
</div>
<p>
<strong> <a class="tell" href="tel:+256123456" rel="nofollow"> +256 123456 </a> </strong>
<br>
<strong> <a class="tell" href="tel:+256547890" rel="nofollow"> +254 756789098</a> </strong>
</p>
</div>
<div class="clearfix">
<div class="rotated-icon">
<div class="sqaure-nebir"></div>
<i class="fa fa-envelope-o"></i>
</div>
<p>
<strong> [email protected] </strong>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<ul class="social-box">
<li>
<a class="facebook-icon" href="https://www.facebook.com/pwebkenya" target="_blank"> <i class="fa fa-facebook"></i></a>
</li>
<li>
<a class="twitter-icon" href="https://twitter.com/pwebkenya" target="_blank"> <i class="fa fa-twitter"></i></a>
</li>
<li><a class="g-plus-icon" href="https://github.com/patwan"><i class="fa fa-github"></i></a></li>
<li> <a class="linkedin-icon" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<!-- photo -->
<div class="col-sm-4">
<br> <br>
<div class="team-member">
<img src="img/7.jpg" class="img-responsive img-circle" alt="">
<h4> Steve Johns</h4>
<p class="text-muted"> Web Developer/Graphics Designer</p>
</div>
</div>
<!-- END PHOTO-->
</div>
</div>
</div>
<!-- block-content -->
</div>
<!-- overlay-3 -->
</div>
<!-- content-block -->
</body>
</html>
Hello Patwan，你能提供一个JSfiddle来处理你的问题吗？ –
@RémyTesta你是指在页面中使用的JavaScript代码？ – Martin
与联系人一起使用的ID尚未在Js中使用，而是我在CSS中使用过它，没有Js用于隐藏或显示div – Martin