0

On my current site (www.webuyfitprojects.com) I am implementing a bootstrap modal ('launch demo modal' button is near the bottom).

I added this code to remove the html margin shifting issue when the modal is opened. (there are multiple threads about it on here):

<script>
    $('#myModal').bind('hidden.bs.modal', function () {
      $("html").css("margin-right", "0px");
    });
    $('#myModal').bind('show.bs.modal', function () {
      $("html").css("margin-right", "-15px");
    });
    </script>

This works on a desktop great - but on my G-Note4 and ipad mini, when I open the modal, the -15px margin-right is applied and the contents of the html expands to the right. Does anyone have a snippet I can add to tell the above code to only work on desktop? And on smaller devices change the margin-right to 0px; so it stops the html expanding?

j08691
  • 190,436
  • 28
  • 232
  • 252
Daniel Gillison
  • 57
  • 5
  • Its not good idea to change margin. Better solution is to add some class and then add your styles only in desktop media query break point in the css file. – Petroff Feb 12 '15 at 16:51
  • It doesn't work by simply adding a class with css alone. I have to modify the css when the plugin is called. I am fighting Bootstraps modal function because it wants to add space for its scrollbar on the right, which I don't need. – Daniel Gillison Feb 12 '15 at 17:16
  • So is your question really about device detection? If so, see this [question](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery) – Ted Feb 12 '15 at 19:58

0 Answers0