[Resolved] Block with full width background looks OK in template, but not on product page

[Author]

Posts

[tommyJ-3]

I have added a 2 column block (in my "Instrument" template) with a background that extends to the browser's full width. It looks OK when editing the template but in the WooCommerce product page the block's background is not full width.

I have set the group block in question to "Full width", but since it does not look OK in the front end I have tried to use various CSS solutions to achieve full width for this block, including one I found here on Toolset, but with no luck.

Here is a link where there are quotes in both columns and a grey background:
hidden link

And here is a link to edit the template in question:
hidden link

[Nigel]

Hi there

It looks like your theme doesn't respect WordPress alignfull styling, there are no styles applied on the front end for that class, even though the class has been correctly applied to the div containing the quotes.

You can typically apply some CSS to achieve the same effect yourself, but playing around in the browser dev tools on your site it is problematic.

An example of the kind of styling that you could apply to that containing div (using the alignfull class as a selector, given that your theme doesn't currently apply styles to it) would be:

.alignfull {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
}

That should work, but trying something similar in the dev tools fails—the expanded quote block is cut off both on the left and right—because the parent div has this CSS rule:

.single-product div.product {
  position: relative;
  overflow: hidden;
}

Specifically, it is the overflow: hidden rule that is cutting off the expanded quote content.

I don't know exactly how you've put this page together, but to be able to do what you want you'll need to either override that CSS rule for that parent div, or move the quote section outside of that div altogether so that it is not affected by that rule.

[tommyJ-3]

Hello again
Many thanks. To unset the rule "overflow:hidden" did the trick for the background. Almost. But now the content starts at the very edge of the browser (in the frontend). But when editing the template it looks OK. Look at the attached images.

[tommyJ-3]

My issue is resolved now. Thank you! I realize that this problem has nothing to do with Toolset, but with my theme's css. Many thanks for finding the "overflow:hidden" problem.