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