Archived topic
Section like look in Hook
3 replies · Started by Todd on February 18, 2019
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.
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.
OK, thank you. No way to easily do that and bring it inside the content?
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/
