[Support request] Element Hook: Full Width Container

[Lucas]

Hi,

I have a hook showing right below the woocommerce product list:

<div id="after-products" style="margin-bottom: 40px; margin-top: -30px; text-align:center; background-color:#731f73;">
	<img src="">
</div>

How can I make this div full-width, but leave the rest of my page as it is?

I tried the code below, but this one makes all elements in the page full-width:

body .grid-container {
      max-width: 100%;
}

Thanks.

[David]

Hi there,

which Hook are you using?

[Lucas]

Please check my website again, it’s actually the .black-bg div
Hook is woocommerce_after_main_content

[David]

Try the Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Use the before_footer hook in the list and then set your display rules. For the Woo Shop page you would use the Product Archive.

[Lucas]

I am in fact using the Hook Element, but my question is how can I make this specific element full-width.

[David]

Did you try moving it to the before_footer hook, this should take up the full width of the page?

[Author]

Posts