Horizontal scrollbar

[Wolfr]

Hey guys,

since reveal uses visibility: hidden instead of display: none (like many other modals), the element is rendered and takes up actual width. The default .reveal-modal width is 320px. If one makes a responsive design and tests it on a phone with 320px width, there's a 200px area on the side and you can "pan" the content.

My solution is disabling the modals for mobile:

@media all and (min-width: 220px) and (max-width: 480px) {
   /* Fix reveal modal's width messing things up on iPhone https://twitter.com/meanlumberjack/status/125595270158360577 */
   .reveal-modal {
      width: auto !important;
   }
}

and in the JS:

$('a[data-reveal-id]').live('click', function (event) {
  if (($('body').width()) > 700) {
    event.preventDefault();
    var modalLocation = $(this).attr('data-reveal-id');
    $('#' + modalLocation).reveal($(this).data());
  };
});

Probably a better solution would to be to depend on display: none;

(This creates a new accessibility problem though)

[meerestier]

This took me forever to figure out... Thanks for sharing the workaround...

[SaraTuna]

I solved my problem this way:

@media all and (min-width: 220px) and (max-width: 480px) { .reveal-modal { width: 90% !important; margin-left: 0; left: 3%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } }

Hope that helps!