Hi all,

 

This is my first attempt at making a website responsive/mobile-friendly. I think the layout works ok but I keep getting this horizontal scrolling when viewing the site on mobile browsers.

I tried centering the content using margin: 0 auto; but that just creates even more horizontal scrolling.

 

Any help with this issue and any other aspects of the mobile design/code would be much appreciated, see below for link:

 

http://www.agtdesigns.co.uk/portfolio%20sites/organicfoods/

 

 

tia,

 

Andy

Hi Andy,

 

Had this a week or so ago. I think it was an overflow-x issue.

 

At a quick glance in mobile view, your nav and list elements extend out of the wrapper (the list elements seem to be adding hefty margins either side). That could be the cause of the extra scrolling.

 

Sorry, I've only had a quick view but I'll see if I can compare what I did that solved the issue, then get back to you. Hopefully someone will give you a better answer before then

 

Nice looking site by the way

I can't see the code at the moment, but have you declared width=device-width, initial scale=0?

might be overflow-x problem, too.

 

edit: not a very elegant solution, but if you give your body 100% width, plus overflow-x hidden, that could fix it.

Edited March 18, 201313 yr by teodora

I really like the design you've come up with there!

 

As for your problem, you've got a few elements that have pixel widths set. I'd advise against this if you're looking to make a responsive site. Try and keep everything to % and ems unless you really need to specifically set the width in pixels.

 

Teodora also makes a good point, the viewport needs to be set, here's the meta tag that I used in my most recent project. This also stopped the 'window dragging' effect that you get on iOS devices:

 

<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no" />

Thanks all, overflow-x hidden and initial scale=0 seems to have worked

Hmmm my initial enthusiasm was premature. Although it seems to work ok when resizing a desktop browser window, when using the browser on my android phone, vertical scrolling seems to have been disabled, also I think I need to make another media query for devices with a width below 480px, as on my android phone the maincontent area becomes distorted.

Edited March 18, 201313 yr by AndyDesigns

Yes, a media query for 320px will be useful. Again, I can't see the code now, but will have a look in the morning, if it hasn't been fixed by then

Try this <meta name="viewport" content="width=device-width" /> without setting scalability. Member, MrLudable, had a similar (ish!) issue a week or so ago and it was resolved with this. A bit of a shot in the dark but it solved his problem without using overflow-x. Overflow-x solved my problem initially but I eventually changed my layout again and didn't have the problem.

I found that my responsive web design got a lot easier when I started designing the mobile site first and then had media queries for larger sites.

Its not the obvious way for most of us who are used to designing for larger monitors, and I didn't like it to begin with, but it works better in the long run.

 

Try using HTML 5 Boilerplate as a starting point if you want, that way most of the CSS is already done, and you just adjust it.

I can scroll the site on my iPhone, but it needs more work, as it doesn't display very well on lower resolutions

I like the design, though, very nice and soft.