Forums

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

Home Forums CSS Width issue on iPhone only

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #288330
    lukefive
    Participant

    Making a site mobile ready, and have a width problem. On my iPhone 8, the test page is about 10 pixels too wide. (Looks fine in Chrome tools) Especially noticeable near the top where there are are two horizontal rules. I tried going through the CSS and changing several widths to max-width. I also temporarily disabled display on all images, and Chris’s tip about HTML width. Kind of stumped. Test page:

    https://www.careprecise.com/m/blend.htm

    #288431
    snippet248
    Participant

    Using Mozilla Firefox Responsive Mode specifically with iphone 8 size allows you to debug the issue, you can download a portable version from portableapps.com I can tell the issue is with article class=”bodyMain”

    #288461
    rose
    Participant
    #288938
    lukefive
    Participant

    Time for a non-spam reply: Although online troubleshooting articles recommend overflow:hidden; as a possible solution, it can cause problems. I removed that property and value from the main content. It works now.
    Thanks to CSS-Tricks for recommending that the HTML/CSS be placed in CodePen and then pieces removed until the layout changed.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.