Full-width hero image constrained to ~55% width on a specific page

  • I have a page https://monkeysandmountains.com/about-us-hiking-tours-europe/ where the hero image only fills ~55% of the viewport width, with the page background colour showing on the right.
    What I’ve established through extensive debugging with Claude:

    The homepage (page-id-1096254) works perfectly with a full-width hero using the same HTML/CSS approach
    The tours page (/hiking-tours/) also works fine with full-width heroes

    The about page body has the class has-grow-sidebar which the working pages do not have
    The body width computes to 1305px on a 1327px viewport — something is constraining it

    All sidebar plugins (Content Aware Sidebars) are deactivated/reactivated and only set to posts (not pages), but it didn’t make a difference.

    The Right Sidebar widget area is empty

    GeneratePress sidebar layout is set to “No Sidebars” both globally and on the page
    Grow/Mediavine confirmed it’s not their script causing it and I have disabled ads/Grow on it with their script

    Every CSS override targeting #primary, #content, .site, body, html with width: 100vw !important has failed

    Even a GeneratePress Element rendered as a Page Hero is constrained to the same width

    The issue persists across multiple duplicates of the page

    Question: What is causing has-grow-sidebar to be applied to this page when no sidebar is configured, and how do I remove it?

    Please advise. Thank you for your help.

  • Hello,

    That’s very strange — GeneratePress doesn’t inject a has-grow-sidebar class in the body tag. That class is coming from somewhere else, likely a plugin or an external script.

    I can see that the has-grow-sidebar class is actually present on all pages, including the /hiking-tours/ page you mention as working. That page also appears to have the hero constrained in the same way, so the issue may be more widespread than just the About page.

    At this point I’d suggest temporarily disabling all plugins and external scripts apart from GeneratePress and GenerateBlocks, then checking whether the class disappears and the hero goes full-width. From there you can reactivate them one by one to identify which one is adding it.

    Once you’ve identified the source, you’ll be able to either adjust that plugin’s settings or remove the class with a small snippet if needed.

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