[Support request] Section like look in Hook

[Todd]

I am trying to get a section like appearance without using sections by putting my content in a hook so that I can have it show up on various pages as I need it. I have a div wrapped in a div and always hoping to be able to have a section like appearance where the content is contained but the container is full width.

So on the link I sent, I could make the blue bar that contains the blue “Get in Touch” block that you see on the page link I sent as it appears but to also be the same color blue left and right full width like a section. I tried various approaches to target the container div and I cannot get this to work.

[David]

Hi there,

you would need to hook it outside of the content in the before_footer hook to extend it full width. You can give your container the grid-container class so the content remains contained.

[Todd]

OK, thank you. No way to easily do that and bring it inside the content?

[David]

Theres a rather nasty CSS hack ( which is what Gutenberg uses ) to expand outside a parent container.

Add these properties to you Section div:

margin-left: calc(-100vw / 2 + 1200px / 2);
margin-right: calc(-100vw / 2 + 1200px / 2);

The 1200px is the width of the parent container minus padding, so may need tweaking.

This article provides a few methods:

https://css-tricks.com/full-width-containers-limited-width-parents/

[Author]

Posts