Remove White Space on Product Page

Resolved xing79
(@xing79)

6 years, 7 months ago

Hello, I am looking for a snippet code to remove the white space on Product Page.
I have searched the forum and have removed most of the white space on main page, navigation bars, etc. However, there is no solution on this particular white space on the Product Page – before product listing, and after Product Page text.

I uploaded an example showing what I mean here:
https://land.elegment.com/whitespace/

This white space only applies to Desktop mode. The mobile mode does not show this white space.

Any help is appreciated! Thanks!

The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Job a11n
(@jobthomas)

Automattic Happiness Engineer

6 years, 7 months ago
Hey @xing79 thanks for the helpful screenshot.

This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:
```
/* Remove whitespace below header */
 
.storefront-full-width-content.woocommerce-cart .entry-header, 
.storefront-full-width-content.woocommerce-checkout .entry-header, 
.storefront-full-width-content.woocommerce-account .entry-header, 
.storefront-full-width-content .woocommerce-products-header {
    padding-bottom: 0px;
}
```
If you change the value next to padding-bottom you can increase this a bit again.

If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).
Thread Starter xing79
(@xing79)

6 years, 7 months ago

Hi Job Thomas, this works great! Thanks a lot! Will also take a look at the free tutorials you suggested. Cheers!

Xing

sirorhan
(@sirorhan)

6 years, 6 months ago

I also have a white space above footer (at the bottom of all pages) and I can not fix it. You can find the link below;
http://sirmalimetal.com.tr/kurumsal/

All of my additional CSS Codes;

.site-header {
background-color: rgba(255,255,255,0.7) !important;
}

.page header.entry-header {
display: none;
}

.page .content-wrapper {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin: 0px;
}

Any help would be appreciated.

Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Remove White Space on Product Page’ is closed to new replies.

Tags