cover isn’t full width

  • Tina

    (@sunflowermom)


    1 year, 7 months ago

    I have been driving myself crazy with this all day! I have tried so many different ways to set up this cover and I cannot for the life of me figure this out!

    I want the background image on this cover block to be FULL WIDTH. Like this: https://hellobeaches.co/

    But tons of online videos and articles talk about finding the full width option in the block options, but it’s not in mine! (see image below)

    I’d be fine with some code to fix this but everything I’ve tried hasn’t worked. Help?

    P.S. Also, the CSS code I used to tilt the cover images works great on my desktop Chrome and Edge browsers, but not on my desktop Firefox browser.

    And it works on Firefox and Safari mobile browsers. But NOT in mobile Chrome browser. Is there any way to fix this?

    • This topic was modified 1 year, 7 months ago by Tina.
    • This topic was modified 1 year, 7 months ago by Tina.
Viewing 3 replies - 1 through 3 (of 3 total)

  • I understand your frustration, and I’m here to help. It seems you’re facing challenges with setting up your cover block. To achieve a full-width background image like the example you shared, you might need to explore custom CSS code.

    For the missing full-width option, it could be related to your theme or settings. If you’re comfortable with code, you can try adding the following CSS to your theme’s customizer:

    css Copy code

    .wp-block-cover { background-size: cover; }

    As for the tilting and compatibility issues, CSS can sometimes behave differently across browsers. To ensure consistent behavior, you might need to use browser-specific prefixes. For instance:

    css Copy code

    @supports (-webkit-backface-visibility: hidden) { /* Your tilting CSS code here */ }

    Remember to replace the comments with your actual CSS rules.

    Don’t hesitate to reach out if you need further assistance. We’re here to help you sort this out.

    Thread Starter Tina

    (@sunflowermom)

    Thank you so much for taking the time to help!

    I have just tried the cover code and it didn’t do anything. ??

    I’m also still having problems with the mobile version on Chrome. ??

    Thread Starter Tina

    (@sunflowermom)

    So I discovered that my theme is what is making the block not have the option of full width. When I set my theme to twenty twenty-three, the option for full width is there…but back to my theme OneListing, it’s gone. I will ask the developer about this.

    Still not sure how to get the Chrome browser on mobile to display my images correctly.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘cover isn’t full width’ is closed to new replies.