Removing White Space from Storefront

if you have a link to the site that could help, have you checked using your browser inspector so you can identify each element and of course make changes to test?

The site is https://www.willowbrew.co.za

I have tried using the Chrome inspect element tools. It’s possible I’m doing something wrong since I’m totally knew to this.

to change the padding, sections margins and to pack the storefront products categories display closer you could try

.site-content {
  padding-top: 0px;
  padding-bottom: 0px;
  position: relative;
}

.site-main {
  margin-bottom: 0px;  
}

.storefront-product-section {
  margin-bottom: 0;
}

in the additional CSS in customizer
if it gets too cramp change the values of padding and margins in the css or remove the relevant codes

• This reply was modified 6 years, 5 months ago by ag1233.
• This reply was modified 6 years, 5 months ago by ag1233.
• This reply was modified 6 years, 5 months ago by ag1233.

@ag1233 I have tried this code in Additional CSS, and on the Stylesheet in Theme Editor.
It isn’t changing anything.
Could it possibly have something to do with the order in which the site retrieves instructions? Maybe it gets child theme which is the way I want and then parent them which takes it back to the standard laayout?
(Not even sure if this is how it works tbh)

well, i’m not too sure about interactions with a child theme as i’m using the woocommerce storefront itself. i observed that it worked in my case.

what i did is to do a view source of the html page and find the tags with the class=”site-content”, class=”site-main”, class=”storefront-product-section” attributes in the html tags and i maintained the css as above which changes the padding / margins etc.

do not try the instructions on your production web below as it may change the look and feel of it, do so in a ‘development’ or test instance.

to identify if the css is indeed working in my case when i maintain it in the customizer in storefront theme in additional CSS, i actually did something like:

.site-main {
  border: 1px;
  border-style: solid;
  border-color: blue; 
}

this would draw a rectangle/border around the element of interest, you could do the same for the other elements e.g. .storefront-product-section, .site-content etc. with those rectangles visible, i’d then try to tune the padding and margins.

if you insert the css for the borders above and nothing happens, it may then be related to your child theme which i’m not too sure how that would work.

initially after i get the page to show the rectangles / borders, i still have various issues and with many trial and errors i finally observed how the padding and margins css influenced the page display, but in my case it goes from too wide to too cramped and i added some padding e.g. 1em etc to ease the congestion

my site is only a test site and i’m trying out the woocommerce storefront
https://xyzdemo.000webhostapp.com/

• This reply was modified 6 years, 5 months ago by ag1233.
• This reply was modified 6 years, 5 months ago by ag1233.

the below code is creating the padding at the top below the menu (brown part)
add it in your Additional CSS but amend the padding-top to a lower size or remove

.page-template-template-homepage:not(.has-post-thumbnail) .site-main {
    padding-top: 4.235801032em; 
}

the below code is creating the margin at the bottom above the footer (brown part)
add it in your Additional CSS but amend the margin-bottom to a lower size or remove

.content-area, .widget-area {
    margin-bottom: 2.617924em;
}

• This reply was modified 6 years, 5 months ago by Farook Kholwadia.

I didn’t try the one for the footer, but the code for the header worked perfectly. Any idea how to reduce the space between elements now? I.e My first paragraph and “Shop by Category”?

Scratch that. It was:

.page-template-template-homepage .type-page {
padding-top: 2.617924em;
padding-bottom: 1em;
position: relative;
}