[Resolved] Make div full screen

[David]

Aah ok – yes the code above CSS and the hooks will only apply to GeneratePress

[Ivan Cazorla]

Alright, thank you anyways!

[David]

You’re welcome

[Ivan Cazorla]

Hi, on this website: https://new.campingsport.es/cubremochilas-funda-viaje/

What I’ve done so far is adding this php snippet to wrap galley and summary on woocommerce product:

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;
	}
}

I’ve also installed the plugin Extend tabs to expand the tabs but keeping each of the tabs in their own wrapper.

I’ve done all this proccess on a different website and it worked out, but in this other web page I’m working on, seems like I’m missing something, because it’s not working.

Any thoughts?

thanks,
Ivan

[Tom]

Is woocommerce_share the correct hook? Perhaps you’re using a different plugin on the problem site that’s using the same hook? That could cause a mixup of the HTML.

[Ivan Cazorla]

I’ve also tried the other hook woocommerce_after_single_product_summary but neither seems to be working. I cannot get to wrap all the hooks and shop them full screen as I did in this other website

What hook should I replace it with, then?

[Tom]

I’m not sure. If it’s working on one site and not the other, you need to find where the difference is.

What’s the purpose of the wrapper exactly? I’m only seeing padding added on the working site.

[Ivan Cazorla]

Hi there, so I have the exact same code and that’s why i don’t really know why is not working. The main purpose of the wrapper is to show the contents all expanded next to the other instead of showing in tabs, making each one of those divs full screen with some padding and background color, so that I can make different colored rows.

[David]

Hi there,

the Woocommerce Share Hook was used in the other instance to create a wrapper around the gallery and summary which allowed them to be treated as a single section for different styling to the tabs. Can you put the hook back to woocommerce share so i can see the issue.

[Ivan Cazorla]

Alright check now. thanks!

[David]

One of the plugins you are using is injecting other HTML – an Opal Wrapper (?) which means the other CSS won’t work. It adds quite a few layers of markup that would need custom CSS to unpick.
Does Opal Wrapper mean anything? Try disabling plugins to see which one is causing it.

[Ivan Cazorla]

I have disabled Opal Framework now, still not getting full width rows

[David]

Not sure if its a cache issue, but the Opal markup is still in there.

[Ivan Cazorla]

I don’t know. I don’t have any cahce plugin installed

[David]

Server caches?
I am not aware of the Opal Framework – so not sure how it was added or whether it would leave code behind.

[Author]

Posts