html - Responsive footer goes to top on mobile; sticks to bottom on phone emulators and desktop? -

recently deployed responsive word press template minimal plugins. footer works on mobile phone emulators , desktop. on actual devices, shoots right below headers above content. want footer stick bottom.

my mobiel test device nexus 5(1080p).

i've tried altering footer usual suggestions nothing works both. turned off php functions fo determining mobile still doesn't work.

here's footer css

here responsive css , php code

    if ($px_theme_option['responsive'] == "on") {                     echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">';                     wp_enqueue_style('responsive_css', get_template_directory_uri() . '/css/responsive.css'); 

css( relvant footer classes responsive.css)

/*============      media 768px start   ============ */ @media (min-width: 768px) , (max-width: 979px) {       #footer{             overflow:hidden;         }  /*============      media 420px start   ============ */ @media (max-width: 767px) {     #footer{         height:67px; }     #footer p{         margin:0 0 0 10px;     }     #footer{         overflow:hidden;     }   /*============      media 300px start   ============ */ @media (max-width: 480px) {  #footer{         height:120px;     }     #footer p{         margin:0;         padding:0px 44px 0px 0px;     }    

might relevant, news articles right on top, , it's covering them. assume shoots below , it's not applying(becuase switched catogories around in world press , pages?).

.news-section article figure{     height:100%;     }     #footer p{     margin:0 0 0 10px; }       #footer{         overflow:hidden;     } /*============     media 940px start    ============ */ @media screen , (min-width: 900px) , (max-width: 1054px){      #footer{         overflow:hidden;     } 

default(i assume desktop since it's in seperate style.css file)

  #footer {         max-width: 1160px;         margin: 0 auto;         background: #141414;         position: relative;         z-index: 99;         height: 56px;         font-size: 0;         line-height: 0;         padding-top: 17px;         border-top: 10px solid #0c0c0c;         box-shadow: -10px 10px #141414,10px 10px #141414 ;     }     #footer p {         float: left;         line-height: 25px;         margin: 0 0 0 35px;         font-size: 11px;         color: #555;         font-style: normal;     } 

footer html

      </div>             </div>          </div>         <!-- inner main -->     </div>     <footer id="footer">         <p class="coptyright">             <?php echo do_shortcode(htmlspecialchars_decode($px_theme_option['copyright'])); ?>               <?php echo do_shortcode(htmlspecialchars_decode($px_theme_option['powered_by'])); ?>         </p>         <?php             if($px_theme_option['footer_social_icons'] == 'on'){                 px_social_network();             }         ?>         <a href="" class="btn btngotop"><i class="fa fa-arrow-circle-o-up"></i></a>     </footer> </div> <!-- wrapper end --> <?php  px_footer_settings(); wp_footer();?> </body> </html> 

try adding

clear:both 

this should keep @ bottom.