White column on mobile view

  • Unknown's avatar
    francescagodi · Member ·

    I have created a website using wordpress.com. It works fine on pc but a white column appears all along the rights side of the homepage when using the website from mobile. It does not appear on the Gutenberg editor when using the mobile visualisation. How should I remove this bothersome white column?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    james3265166 · Member ·

    The “white column” you’re seeing on mobile is almost always caused by an overflow issue, where a single element—like a large image, a wide table, or a block with fixed padding—is physically wider than the mobile screen’s viewport. Even if the Gutenberg editor tries to “visualize” it correctly, the live browser renders the extra width, creating that horizontal scroll space that looks like a white bar on the right. To fix this without code, check any Group or Cover blocks on your homepage to ensure they aren’t set to a “fixed width” in pixels, and try toggling the “Inner blocks use content width” setting in the block sidebar; if that doesn’t work, you can usually force it away by adding a small snippet of “Additional CSS” (under Appearance > Customize) that sets body, html { overflow-x: hidden; } to clip any content trying to poke out the side.

  • Unknown's avatar
    francescagodi · Member ·

    Thanks James for answering! I’m very grateful.

    First, I tried to check if any of my group blocks were set on fixed width. All of them are set to a fixed width. Header, Hero and Footer are set to full width. Whereas all other blocks are set to “None (max 645px wide)” which was the deafult for my theme (Twenty Twenty-Five).

    Nothing changed…

    Second I toggled on “Inner blocks use content width” on all blocks where I could do so.

    Still no results…

    Third, I tried the custom CSS “body, html { overflow-x: hidden; }” and… IT WORKED! I am so grateful, I’ve been fighting with WordPress for a whole while trying to make the column disappear.

    Do you have any idea how I could fix this via Gutenberg? I’d like to go looking for the issue and solve it without additional CSS.

    Anyway, THANK YOU SO MUCH! You’ve been a real lifesaver

Log in or create an account to reply