- This topic is empty.
January 27, 2015 at 2:46 pm #194377Joanne MastersonParticipant
I see a horizontal scrollbar when testing this site on iPhone
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.January 27, 2015 at 4:24 pm #194384shaneismeParticipant
Chris did something on this:January 27, 2015 at 7:49 pm #194393
Not seeing a scrollbar, did you fix it already?January 27, 2015 at 8:09 pm #194395Joanne MastersonParticipant
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.January 27, 2015 at 8:35 pm #194396
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.January 28, 2015 at 6:55 am #194455
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.January 28, 2015 at 7:13 am #194456
Isn’t 295px smaller than even the smallest phones these days?…I thought 320px was as small as most media queries cater for.January 28, 2015 at 7:42 am #194459
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…January 28, 2015 at 7:50 am #194461
If it’s on a watch you’d probably need this to read the site in question
but then there’s this issueJanuary 28, 2015 at 7:57 am #194463
The fruity brand itself reports 272×340 pix for the smaller watch…
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.January 28, 2015 at 8:16 am #194467
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.January 28, 2015 at 7:55 pm #194571
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).January 29, 2015 at 3:19 am #194580
We might as well get used to the idea of designing a step smaller (again).
- The forum ‘CSS’ is closed to new topics and replies.