How to get background of text in Cover block matching width of the Cover?

  • I added cover to template, set cover image and set Overlay Opacity to zero.

    Then I added Cover Text and set Background for text as 50% of black, and Text color as White.

    Background of text matches only text width.

    I tried to enclose text with Group and Column (with background set to 50% black) with intention to make them expand to width of Cover but it did not work either. Both Group and Column do not expand wider than Text.

    I can change width of Group or Column and it would work only if I set width shorter than Text. If I set it wider, it will not expand more than text width, like it simply ignores specified width.

    Actually, while trying to make site i tried few block themes and with each i found problems with setting width of blocks. It is particularly hard to set block to expand to width of its container.

    As I am quite new in using block themes, I hope this is just me not understanding how to do this, and not issue with blocks.

    I use WP 6.2.2 and theme OmniPress Magazine.

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

  • Hi @pedjas it sounds like you want the text on top of the cover block to spread out across the cover image but I am not quite sure. Correct me if I am wrong.

    I’m not sure what you are seeing on your site but when using the TT3 theme, the text is spread across the cover block. When I want to increase the width of the cover block I use the settings shown below and that also automatically affects the text.

    Screenshot 2023 05 24 at 03 15 06

    How content is displayed is something coming from your theme I would suspect, are you able to share a link to the page on your site? Alternatively, you can take a screenshot and add it to https://snipboard.io/ the site will provide a link which you can share here.

    Thread Starter pedjas

    (@pedjas)

    Site is not visible publicly. Here is the snapshot of the part of the page I am coping with.

    Third Cover looks like I want them all but this one has text long enough that it does take up all the with.

    It seems from the last WP update there is no option to just insert custom CSS on the block. Now we have to specify just custom style name. That means we have to edit styles in style file directly, and it seems there is no built in option to do so.

    Anyways I expected such basic behavior should work naturally, without requirement for the user to dig through CSS.

    I did not try this very case on TT3 theme, but I did try to use it before and setting block with was weird there too, like it has its own (not obvious) rules, and user has almost no way to influence that. I will try it, just to make sure if this is about whole theme behavior.

    Hi @pedjas looking at the image you provided and how the text is structured, these don’t seem like cover blocks. However, you might have added custom code to adjust how the text and background look. It’s hard to tell without access to the page and source code. If you want to add CSS code to adjust the background width you can add it to the Additional CSS section in the site editor.

    To access the additional CSS section open Global Styles in Appearance > Editor then click on 3-Dots that appear on the top-right. You will then see the option to access the Additional CSS section for your site.

    Screenshot 2023 04 25 at 11 21 24
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to get background of text in Cover block matching width of the Cover?’ is closed to new replies.