Jump to content

Div not displaying properly on Mobile


Jaytech
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...