Make div full screen

Hi there,

What's the difference between this and setting the Body background color?
Having a little trouble picturing this so any image or example would be of help.

Hi again,

Well I'd like to make different colored sections as this example on the image, so I cannot use always the same body background color.

https://snag.gy/MNzfP5.jpg

Website example link here: https://www.campz.es/columbia-whitetop-chaqueta-azul-704222.html

thanks,
Ivan

I wish I could use GP hooks but as for woocommerce product tabs I think that's not possible, isn't it?

thanks,
Ivan

Its not possible with GP Hooks without rebuilding most of the page. The Woocommece hooks are also within the post content so will be limited by the container width.
It would require us to make the entire page full width and then add back the containment where required using margins. Is it just the tabs section you would need this for?

Alright, I understand. Yes I only need this for the tabs sections. Yeah I thought doing the entire page full width and then add back the containers.

thanks,
ivan

FYI here are the Woo Hooks.

https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

Unfortuntely there is not a hook below the tabs section until you get to the end of the product. But you could use the before single product summary and after single product summary to wrap the gallery and description to make that a bit more manageable when re-assinging the containment:

thank you for your help, I'll see what I can do.

thanks!
ivan

You're welcome.

What I am really trying to achieve is to make something similar as this: https://www.campz.es/columbia-whitetop-chaqueta-azul-704222.html

I've managed to display the product tabs in sequence and found a plugin called Woocommerce Custom Tabs that lets you add multiple tabs and using the GeneratePress editor I can set that own that to be full screen or contained.

Seems that you need the buy the pro version of the plugin to let you really see the tabs you've created in the product page. So lame....

cheers,
Ivan

If you can share a link then i'll have a look to see if we can get it closer to the example, or whether another approach is necessary.

Hi, this is one of the websites I would like to make that happen: https://www.avancesliberty.com/tienda-cocina-estela/

Similar what this website does: https://www.campz.es/columbia-whitetop-chaqueta-azul-704222.html

thanks,
ivan

Let's give this a shot:

PHP Snippet to wrap gallery and summary

add_action( 'woocommerce_before_single_product_summary', 'awp_before_woo_summary', 5 );
function awp_before_woo_summary() {
	echo '<div class="awp-woo-wrap grid-container">';
}

add_action( 'woocommerce_share', 'awp_after_woo_summary', 10 ); 
function awp_after_woo_summary() {
	echo '</div>';
}

And CSS:

@media (min-width: 768px) {
	.single-product .site {
		max-width: 100% !important;
	}
	.single-product .woocommerce-breadcrumb,
	.single-product .related.products {
		max-width: 1100px !important;
		margin-left: auto;
		margin-right: auto;
	}
}

hi,

now I have everything wrapped and in full-screen mode.

thanks,
ivan

How can I just make for example individual sections with different background colors?

Like setting the description section with a grey background color?

thanks,
ivan