bootstrap Div not displaying properly on Mobile

Jaytech · August 2, 2017

I am creating a web page layout using bootstrap and the backend is PHP Laravel, the web page is partitioned into various divs which work fine on various screen devices but when I upload the project on a live server and view the page on mobile part of the service and contact section is hidden behind a white background, I find it hard to figure out to debug the CSS code to make the two sections visible in mobile,,,please assist?

HTML

<!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> info@tcol.com </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>

CSS code

@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%;
    }
}

Sign In

bootstrap Div not displaying properly on Mobile

Recommended Posts

Jaytech

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity