Kel Santiago-Pilarski

Hi @donbowman, thanks for reaching out! It does look like what you’re experiencing on your site is similar to the issue described in the Github link you shared.

I’m wondering if it makes any difference if the blocks are not grouped? Are the blocks grouped to have the same background color? Have you tried CSS for the background color of that group?

Thanks for getting back here to let us know. We’re glad that’s sorted out.
No worries at all, you’re welcome!

Hi @beccaj48, I visited your site in mobile and the site title and texts in the header are not being cut off in multiple lines. If you’re still experiencing this issue in mobile, please clear your browser cache or check the site with other browsers.

Hello @stefandumitru!

Thanks for writing in and sharing your site url. On my test site, I was able to replicate the blocks you have under the  ‘Advertising experience’ section. In desktop, it’s alternating text – image on the first row, and image – text on the second row. But in mobile the images are appearing next to each other instead of alternating like in desktop. This is expected on a smaller screen like mobile, as on the first row, it’s text – image, then the second row image – text.

Currently, the blocks used are Columns block – the first column with texts, and the other column with the image. To make the texts and image alternate in both desktop and mobile, instead of the Columns block, use the Media and Text block instead.

For example, on the first row, have the text on the left and image on the right like in this screenshot. And the other row with the image on the left like in this screenshot.

For the ‘Papercut Short Film’ section, you can also try the Media and Text block and check if that will make the image expand like the texts on its right.

Thanks for posting there, @w-sky. Since there’s already a reply in WooCommerce, I’ll mark this topic resolved.

Hi @shrewy!

Thanks for sharing your site link, but I’m unable to see that due to an error. From what I understand, you’ve created a header with the mini cart and it looks great in desktop, but not in mobile, right?

Can you share screenshots how it look in desktop and mobile? Also, have you tried deactivating all your plugins except WooCommerce, and checked how the header looks like in mobile after doing that?

Hello @autori76 !

Thanks for writing in and sharing the GIF example. I’ve just tried these synced patterns with the Twenty Sixteen theme and it worked. After creating a pattern, duplicating it and editing the original pattern affected the duplicates.

Please refer to this guide here for synced patterns – https://developer.wordpress.org/news/2024/06/18/an-introduction-to-overrides-in-synced-patterns/#synced-patterns

Hi @jonasgs!

Open the page or site editor where the cover block is at. Click the cover block > click Settings icon on the upper right to open the Block settings. On the lower right is Advanced, click that and under “Additional CSS Classes”, enter in the box cover-image-class
Screenshot: https://wordpress.org/documentation/files/2023/03/cover-block-advanced.png

Then go to the site editor. On the upper right, click Styles settings > click the 3 dots next to it, and select “Additional CSS”. Add the CSS code in the box and click Save.
The CSS code will apply only to the cover block with cover-image-class class you’ve added to.
See the guide here on applying CSS code in Styles: https://wordpress.org/documentation/article/styles-overview/#applying-custom-css

• This reply was modified 1 year, 10 months ago by Kel Santiago-Pilarski. Reason: Edited to add the correct link to Applying Custom CSS documentation, instead of a screenshot