Easy Peasy Responsive Design Question
November 17, 2017 4:05 PM Subscribe
How do I keep a responsive web page from sliding around horizontally on mobile devices?
Here's the draft page. If you look at it on your phone you'll see what I mean. On a computer, big or small, it stays put horizontally. On a phone, if you touch or swipe left or right, it slides around. How do I pin the page to the device width, and still allow for people to enlarge the text if they want? Needless to say, this is a template someone else made that I've been tweaking -- I didn't make it myself.
I got a notification that I'm "in danger of being banned from asking questions" at Stack Overflow -- sheesh! So please don't suggest I ask over there. Thanks, you nice people, for any suggestions!
Here's the draft page. If you look at it on your phone you'll see what I mean. On a computer, big or small, it stays put horizontally. On a phone, if you touch or swipe left or right, it slides around. How do I pin the page to the device width, and still allow for people to enlarge the text if they want? Needless to say, this is a template someone else made that I've been tweaking -- I didn't make it myself.
I got a notification that I'm "in danger of being banned from asking questions" at Stack Overflow -- sheesh! So please don't suggest I ask over there. Thanks, you nice people, for any suggestions!
You need to start by fixing all the broken calls to several style sheets:
/css/nivo-lightbox-theme/default/default.css
contactform.js
font-awesome.min.css
default.css
/css/nivo-lightbox-theme/default/default.css
posted by humboldt32 at 4:32 PM on November 17, 2017
/css/nivo-lightbox-theme/default/default.css
contactform.js
font-awesome.min.css
default.css
/css/nivo-lightbox-theme/default/default.css
posted by humboldt32 at 4:32 PM on November 17, 2017
I also haven’t looked at your code (typing this on my phone), so this is a (poorly-educated) guess, but: could it be that somewhere in your CSS the min-width of one of your containers is set to be larger than the tablet / phone viewport size?
posted by sailoreagle at 4:33 PM on November 17, 2017
posted by sailoreagle at 4:33 PM on November 17, 2017
Response by poster: Found it and fixed it! Thanks all, especially [insert clever name here]!
posted by pH Indicating Socks at 7:09 PM on November 17, 2017 [1 favorite]
posted by pH Indicating Socks at 7:09 PM on November 17, 2017 [1 favorite]
« Older Exactly how politicized is the high and tight... | State (WI) Tax Refund Check made out to... estate... Newer »
This thread is closed to new comments.
Something is causing the page to be too wide. I've run into it a few times; one of those seemed to be a legitimate iphone bug. You'll have to figure out what element it will need to go on, but probably one of the outer containers.
I did not look at your page, and it's been a few years since I've done any "real" coding, so take with a grain of salt.
That being said, overflow-x:hidden should work. ;)
posted by [insert clever name here] at 4:29 PM on November 17, 2017 [1 favorite]