Jump to content

Div not displaying properly on Mobile


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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...