Page not formatted in Chrome but other browsers are good

  • Resolved flatword

    (@flatword)


    10 months, 3 weeks ago

    I have a page that was formatted nicely in Chrome, Firefox, and Edge. I added a new section below another via some copy/paste/delete…and now in Chrome (not Incognito) , the formatting on the middle is gone. It’s fine in Chrome Incognito and Firefox and Edge. it is also fine on an Android phone. I cleared the WordPress SG cache. I cleared the browser cache.

    If I restore to the previous version before the recent changes, it formats correctly. But when I go back to the recent version, its bad again.

    If I save the page as HTML and open it in regular Chrome, it is fine.

    I am not sure how to debug any further. I welcome suggestions. Thank you

    • This topic was modified 10 months, 3 weeks ago by Jose Castaneda. Reason: Removed login details

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • This is what I’m seeing in Chrome (same in Firefox, Edge, and Brave)

    https://s3.amazonaws.com/i.snag.gy/ea3X9x.jpg

    Is this the properly formatted one, or the bad one?

    Thread Starter flatword

    (@flatword)

    Thank you for such a quick reply, George.

    You are seeing the correctly formatted page.

    What I see in Chrome are the 3 middle sections (that contain the bulleted list items) as having no border around them and they sit flush to the left of the screen.

    Thread Starter flatword

    (@flatword)

    The problem ended up being mixed http and https content which is fixed now by a siteground tool to Fix Insecure Content. That only affected the display of the page when logged into wordpress (which is when I was seeing the problem).

    Thank you again for your reply. It let me know I wasn’t crazy!

    Alor Web

    (@jerrymayalor555)

    Hi @flatword,

    You can also try to add a CSS code to the elements that have had an issue before. Here are my suggestions.

    #wp-block-themeisle-blocks-advanced-column-1c168b74,
#wp-block-themeisle-blocks-advanced-column-01f96e0c,
#wp-block-themeisle-blocks-advanced-column-d251ad96 {
    border:1px solid #000 !important;
}

@media only screen and (min-width: 960px) {
    .wp-block-themeisle-blocks-advanced-columns {
        display:flex  !important;
    }
}
    1. Copy the CSS code above
    2. Go to your WordPress dashboard
    3. Go to Appearance > Customize.
    4. On the customizer, find the option for Additional CSS.
    5. Paste the CSS code in the Additional CSS field.
    6. Click Publish to save your changes.

    In that way, your layout will have a fixed border, and it won’t flush to the left side.

    Warm regards,

    Jerry

    Thread Starter flatword

    (@flatword)

    Thanks Jerry. The elements on the page that had this problem did not have any problem before. In fact, they were fine until surrounding changes did something to them. It ended up being a problem only when logged into WordPress. The browser did not matter. It was the mixed code created by the WordPress version of the site.

    Thread Starter flatword

    (@flatword)

    Marking this resolved.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Page not formatted in Chrome but other browsers are good’ is closed to new replies.