1

I am trying to set the "bottom" property of a div on my mobile site. I am using jquery because the people who developed the app which generates this div loved to use inline styles with !important tags. My main goal here is to set the bottom to 50px once the div is loaded ( I am waiting 2 seconds to test )

It seems to work on the responsive chrome dev tools, but not on my iphone. Any suggestions?

script below : 

    $(document).ready(function() {
     //move mobile container
     setTimeout(
     function() 
     {
        var mq = window.matchMedia( "(max-width: 660px)" );
          if (mq.matches) { 
             $('#mobile-container').css('bottom','50px');
          }
     }, 2000);
  });
chris cozzens
  • 517
  • 4
  • 19
  • it is possible my problem is with the media query i am using? I can not figure out why it works in chrome dev tools and not on iphone – chris cozzens Apr 11 '17 at 15:53
  • you can use `window.innerWidth` instead of `window.matchMedia( "(max-width: 660px)" )` https://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript – philr Apr 11 '17 at 15:56
  • try to split the problem, first - check that setTimeout works, then, update some div with debugging info, you told about '!important', not sure how jquery helps you, with css just set more specific selector than setted, also with important, if still on js, try to make your 'bottom' important too – zb' Apr 11 '17 at 15:56
  • I just cant seem to figure out why its working in chrome, but not on the actual phone – chris cozzens Apr 11 '17 at 16:11
  • @philr media query is working each way, tested with console.log to ensure that the width on the phones should be triggering this change in the bottom attr – chris cozzens Apr 11 '17 at 16:11

0 Answers0