Which div is too wide?

[Joanne Masterson]

Hi –
I see a horizontal scrollbar when testing this site on iPhone

http://stewardshipforus.com

I can’t seem to find which div is too wide. Only the home page creates the horizontal scroll; the inside pages are fine.

I have tried hiding each division with display: none in hopes a process of elimination would work. Unfortunately it did not reveal the offending element.

1) How would you find this?
2) Which div is it, do you think?

Thanks for any help.

[shaneisme]

Chris did something on this:

https://css-tricks.com/findingfixing-unintended-body-overflow/

[Senff]

Not seeing a scrollbar, did you fix it already?

[Joanne Masterson]

Hi Senff and Shaneisme –

I see the problem on iPhone – and the horizontal scrollbar appears when moving the visible area left or right. The inside pages fit without the horizontal “wiggle room” that I’d like to eliminate.

Thanks for the link to Chris’s post – it didn’t turn up in my search for some reason.

I turned off every visible division still had the problem – maybe the body is too wide, but it’s hard to believe that is the problem. I’ll keep at it.

[Shikkediel]

After playing around with it a bit, I noticed the scrollbar only appears (on FF) if the window is 295 or less pixels. More so, setting all padding to zero (merely experimental) seems to prevent it from happening. Haven’t found the exact CSS that is causing it though.

[Senff]

I see the problem on iPhone – and the horizontal scrollbar appears when moving the visible area left or right.

I just tried it again on my iPhone 5 with iOS 8, in both Safari and Chrome, both landscape and portrait mode, and I don’t get a scrollbar anywhere.

After playing around with it a bit, I noticed the scrollbar only appears (on FF) if the window is 295 or less pixels.

That’s because of the ASIDE element in the footer, which is set to be at least 220 pixels wide — add some padding and you end up with a scrollbar when the screen is 270 or so.

[Paulie_D]

Isn’t 295px smaller than even the smallest phones these days?…I thought 320px was as small as most media queries cater for.

[Senff]

There are devices with 240px wide screens. Rare (and in my personal opinion quite useless) but they’re there. And even if they’re not, who knows what the Apple Watch will be like…

[Paulie_D]

If it’s on a watch you’d probably need this to read the site in question

but then there’s this issue

[Shikkediel]

The fruity brand itself reports 272×340 pix for the smaller watch…

Apple Watch Guidelines

If I read it correctly, that is (there’s much number juggling elsewhere online). Quite relevant for the issue here, not so much with the bigger one.

[Senff]

Sure you could argue that you’d need a magnifying glass. However, if a popular device (which is what the Apple Watch will undoubtedly be) has a small screen like that, we should cater to that.

[Shikkediel]

Apparently the watch doesn’t have a browser of it’s own yet and at this point it would still only be an interface for other Apple devices. Most likely this will be different in the (near?) future though so we might as well get used to the idea of designing a step smaller (again).

[Paulie_D]

We might as well get used to the idea of designing a step smaller (again).

Indeed..:)

[Author]

Posts