Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Which div is too wide?

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #194377
    Joanne Masterson
    Participant

    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.

    #194384
    shaneisme
    Participant
    #194393
    Senff
    Participant

    Not seeing a scrollbar, did you fix it already?

    #194395
    Joanne Masterson
    Participant

    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.

    #194396
    Shikkediel
    Participant

    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.

    #194455
    Senff
    Participant

    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.

    #194456
    Paulie_D
    Moderator

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

    #194459
    Senff
    Participant

    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…

    #194461
    Paulie_D
    Moderator

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

    but then there’s this issue

    #194463
    Shikkediel
    Participant

    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.

    #194467
    Senff
    Participant

    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.

    #194571
    Shikkediel
    Participant

    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).

    #194580
    Paulie_D
    Moderator

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

    Indeed..:)

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.