Archived topic
Remove whitespace above description
6 replies · Started by diana on July 25, 2021
Hi,
The single product page has a lot of white space below photo gallery and above product tabs panel (with description tab). I was trying to play around with CSS however i cannot make it work. can you please help me out to move those product tabs up a bit to remove white space ?
Hi there,
That's super strange.
I'm not seeing where the space is coming from either.
Can you disable Autopimize and any other caching plugins you are using first?
Also is this from a site library import?
Let me know :)
Hey Leo,
I am talking about that <div class="woocommerce-tabs wc-tabs-wrapper">. it is rendered just right after <div class="summary entry-summary"> which has set clear:both in CSS. So there is a bit of a whitespace below gallery just right above product tabs. Trying to set float:left neither does help.
Somehow I cannot manage to figure out how to move that wc-tabs-wrapper closer to the image gallery.
Now that you mentioned about plugins... I am using some plugin for product gallery. I think it changes the gallery on the fly using jQuery. Maybe while its doing some changing in-place it leave that space in there after the original gallery layout hmmm
I think it is site library import, yes.
Hi Diana,
The reason that the white space appears is the product description is longer than the image.
As you can see in the below screenshot, in this situation, space will appear on all Woocommerce product pages.
https://www.screencast.com/t/vRc6I4m7td
And the white space will become bigger on smaller screens.
I'm sorry, but don't see an elegant way to remove the white space.
You can try the following:
1. Use a block element - page hero to replace the current product title which occupies a big space.
https://docs.generatepress.com/article/block-element-page-hero/
2. Increase the width of the product description area by decreasing the product gallery width which is set to 65% currently.
3. Remove the tags from the product description area.
Hope it's helpful.
Hey,
That solution is not really a viable.
I managed to solve the problem by myself in the end using following CSS.
.woocommerce-tabs.wc-tabs-wrapper {
clear:none;
}
.summary.entry-summary{
float:right !important;
width:31% !important;
}
Not ideal but still I think its a bit less intrusive.
I see you added some different widths for those sections with different media queries as well.
Overall that's a beautiful way to solve the issue :)
Glad you figured out a better way!
Thanks for your time !