Skip to main content

Forums

This topic contains 3 replies, has 3 voices, and was last updated by  lukefive 3 months, 2 weeks ago.

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.

icon-link icon-logo-star icon-search icon-star