How to reduce padding in Product Page

[leboggia]

Hi there,

I'm building an online-store, but I found excessive the Padding between the Product info and the "Long Description" (see image below, the area between red arrows is what I'm referring to). I can't use that area to put any information, nor can I reduce it to make the page more "compact".

I don't really know how to code... but know a few very basic tricks. So tried to get to the HTML code to fix it in the Product template itself, but there's no Padding option, or "Long Description" position, or any way to adjust the upper DIV height. Just references to other pages (images/sku/sharing/inventory/etc) that are not shown on the Code Editor.

I'd really appreciate someone can throw me a bone on how to reduce all that white area, so the "Long Description"  work area is closer to the Images and the "Add to Cart" button.

Thanks.

[Adam7]

Hey @leboggia! Is your site live? If you post a link to it that'll help our Community members troubleshoot your CSS questions.

[leboggia]

Yes, sure.

There it goes:

http://www.onebuckfloors.com/store/p1/Bella_Olive.html

[BJ5 · Accepted solution]

If you've already edited your theme, add this to the bottom of main-style.css:

#wsite-com-product-info-inner {
	padding-bottom:0px !important;
}

Otherwise, you can add this to Settings > SEO > Header Code and you won't need to edit the theme:

<style>
	#wsite-com-product-info-inner {
		padding-bottom:0px !important;
	}
</style>

[leboggia]

Settings > SEO > Header Code

<style>
	#wsite-com-product-info-inner {
		padding-bottom:0px !important;
	}
</style>

That just did the trick!

A quick screen capture for the people with the same issue:

 

Thank you guys!!