CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsive-design
Jon S
Jon S

Reputation: 3

Java Script Works Properly (no Horizontal Scrolling) on Desktop, but on Mobile extends far beyond viewport?

I am currently working on www.kylehoard.com (it's live). On my desktop (macbook air 13), the responsive navigation menu works as it should, and Smoothdivscroll (jQuery plugin to handle image gallery, located here http://smoothdivscroll.com) looks as it should.

The div containing the images should be 100% width, and the images should be horizontally scrollable (they are correctly working on the desktop version).

On my mobile (iPhone 6, evo 4g lte), div containing the images extends past the viewport. Instead of being 100% width of the phone, you can manually scroll sideways for seemingly forever. Because of this, the width of the page longer than it should be, so the responsive menu doesn't show up.

I have it narrowed to smooth scroll div, but I'm confused as to why the problem would only occur on a mobile device and not the desktop.

Upvotes: 0

Views: 87

Answers (1)

JoppeSchwartz
JoppeSchwartz

Reputation: 81

It's not clear from your question how you narrowed the source of the issue to the smoothdivscroll package. It might help if you provided more information on that topic.

In any event, you may find it useful to employ the <meta viewport ../> tag, which assists with scaling on screens with different form factors. It is especially useful for designing responsive pages that display properly on mobile devices.

I suggest you set the viewport and tell us what happens. For starters, try this:

<meta name="viewport" content="width=device-width, initial-scale=1">

For further reading, see Google's recommendations for setting viewport for mobile-ready pages and Mozilla's guide to configuring the viewport.

Upvotes: 1

Related Questions