Russell theme pattern width and appearance on mobile

  • Unknown's avatar
    bysaeh · Member ·

    Hi, I’m using the Russell theme but can’t seem to stretch the ‘about’ pattern block background colour full width even when is it full width, it might be restriction on blocks on main body of the website but seeing if there’s an easy fix for it? Also my thumbnail seems to appear on mobile version, how can I remove it just for mobile or make it smaller? Images attached.

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

  • Unknown's avatar
    kudufo · Member ·

    Hi @bysaeh

    Great site — love the clean aesthetic! I can see both issues clearly from your screenshot. Let me address them one at a time.

    Issue 1 — About section background not stretching full width

    This is a very common limitation with the Russell theme. The main body content area has a constrained width wrapper applied by the theme, which prevents backgrounds from bleeding edge to edge even when the block is set to “Full Width.”

    Here’s what to try:

    1. Click on the Cover or Group block that contains your About section
    2. In the block settings on the right, make sure “Full Width” is selected under Align (the icon that looks like two arrows pointing outward)
    3. Then click into the outer container (keep clicking the parent block using the breadcrumb at the bottom of the editor, it usually shows “Cover → Group → Page”) and check if there’s an inner container restricting the width, set that to Full Width as well
    4. If it still doesn’t stretch, try adding this CSS under My Site → Appearance → Customize → Additional CSS:

    css

    .wp-block-cover.alignfull,
    .wp-block-group.alignfull {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    Note that Additional CSS requires a paid plan on WordPress.com. If you’re on the Free plan, let us know and we’ll explore other options.

    Issue 2 — Thumbnail appearing on mobile

    To hide the thumbnail only on mobile, go to the Image block settings → look for “Hide on mobile” under the block’s Advanced settings tab on the right sidebar. On WordPress.com this option may appear as a visibility toggle depending on your plan.

    If that option isn’t available, this CSS will hide it on mobile only:

    css

    @media (max-width: 768px) {
        .wp-block-post-featured-image {
            display: none;
        }
    }

    Could you let us know which plan you’re on? That’ll help us confirm which of these options are available to you.

  • Unknown's avatar
    bysaeh · Member ·

    Free plan. My friend was able to stretch the banner though without the custom css, she made it last year though so she doesn’t even know how. Is there something I’m missing?

    For Issue 2 how do I go to Image block?

Log in or create an account to reply