[Resolved] Make div full screen

[David]

Then plugin you are using to break the tabs into separate sections is also stripping away their wrappers. This plugin expands the tabs but keeps each of the tabs in their own wrapper. Need to to add something like so and then we can target each of them with some CSS

https://wordpress.org/plugins/woocommerce-extend-tabs/

[Ivan Cazorla]

I’ll do that.

Thanks,
Ivan

[Ivan Cazorla]

Okay plugin and everything activated but I still have not managed to separate the sections. What am I missing?

thanks,
Ivan

[David]

I can’t see the sections, do you still have the other code / plugin installed that you used to break the tabs?

[Ivan Cazorla]

Now the sections are visible, I had two different php codes messing around.

take a look: https://www.avancesliberty.com/tienda-cocina-estela/

But now everything is surrounded by the site-content container that has a padding on it. I cannot get full-width on each section yet.

thanks,
Ivan

[David]

So try this to remove the padding from single post

.single-product #content {
	padding: 0;
}

Give this a try to see if we can manage the first tab section:

.woocommerce-Tabs-panel--description {
	background-color: #f6f7f8;
}
.woocommerce-Tabs-panel--description > * {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

[Ivan Cazorla]

it works! I’ll add some padding to each section and it should be done. What if I would like to background-color the specs section?

thanks,
ivan

[David]

This class for the specs:

.woocommerce-Tabs-panel--additional_information

[Ivan Cazorla]

thanks so much!! I guess this case is solved. Many thanks!

[David]

Glad to be of help.
As a note you may want to put your CSS within a MediaQuery to limit to desktop (and maybe tablet)

[Ivan Cazorla]

Perfect, I did it! Btw, I’ve also implemented this same thing in another website as you can check here: https://new.campingsport.es/platillo-base-canadiense/

But the problem is that it also wraps the images, title, short description and add to cart button and sticks it to the left and I don’t now why.

There isn’t any way to just wrap the sections from below? such as description and product attributes. Your help is much appreciated!

thanks,
Ivan

[David]

Hi Ivan, i can’t see that issue. Have you fixed it?

There’s not really a simple way to wrap the lower content. The above wrapper is a bit of a hack, taking advantage of the social share hook, but it won’t work if you open the wrapper in that hook and close it at the end of the product.

[Ivan Cazorla]

Hi again, I’m still having this error, the entire block moves to the left, including the image, title and price. And I would only wrap the tabs and display them together in full screen so that I can add a color background to each one of them.

Is the code above only working with generatepress?

thanks,
Ivan

[David]

Hi Ivan,

Which site is the problem on?

[Ivan Cazorla]

Hi there,

On this one. I’m thinking a lot on changing the theme and use GeneratePress, but the only thing that he is holding me back is how I am gonna recreate the entire header with the vertical mega menu.

thanks,
Ivan

[Author]

Posts