Div hidden in white background in mobile device

Question

I am creating a web page layout using bootstrap and the backend is 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 the problem in CSS code,,,please assist?

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






  
  
  
  
   >

  
  

  
  







  
  
    


    
       Services
      
    
    
      
        
           Welcome 
        
      
      

        
          
    
    
    
           School Of Arts
          ...............
        

        
          
    
    
    
          School of Business 
           ........... 
        

        
          
    
    
    
           School of Engineering 
           ........ 
        
      
      

        
          
    
    
    
           School of Human Resource
           ........ 
        

        
          
    
    
    
           School of Medicine 
           ........ .......
        

        
          
    
    
    
           School of Biological Sciences 
           .......... 
        
      

    
  
  



  
  
    
      
        Contact
        
      
      
        
          

            
            


              {!! 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() !!}
            

            
            
              
                
                  
                    
                      
                        
                        
                      
                       3069 Nkr 

                    
                    
                      
                        
                        
                      
                      
                          +256 123456  
                        

                          +254 756789098 
                      
                    
                    
                      
                        
                        
                      
                      
                         info@tcol.com 
                      
                    
                  
                
              
              

                
                  
                     
                  

                  
                     
                  

                  

                   
                
              

            

            
            
              
 

              
                
                 Steve Johns
                 Web Developer/Graphics Designer

Div hidden in white background in mobile device

Answers (1)

Related Questions