Support » Plugin: WooCommerce » Too much white space

  • Resolved apb1963

    (@apb1963)


    My homepage has a gigantic white space at the top; it takes up almost 1/3 of my desktop monitor, while the “shop” page is similar, but the white space is smaller. Any ideas why or where it’s coming from? Very little white space in that area is ideal. Right now you have to scroll down to see anything of value. Thank you in advance!

    (Not important, but I started this thread previously, but due to technical difficulties couldn’t get back to it before it was closed. The thread doesn’t have any info of relevance other than the above identical paragraph, but I would like to thank the people who did reply to me with questions and things.)

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

Viewing 14 replies - 1 through 14 (of 14 total)
  • Hi, apb1963!

    I found 2 divs with padding before Shop Category

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

    You can modify it by adding the code CSS to your theme Appearance -> Editor -> style.css then reduce the padding with your space that you want.

    Such as padding-top: 2em;

    Save it and refresh homepage. Telling me if your homepage doesn’t change.

    Thank you for responding.

    Well OK, but why is my page different from other people’s pages, in regard to this aspect of it? I have made no CSS changes anywhere (nor did I really want to do so), so why am I forced to modify an “out-of-the-box” configuration to make it display “normally”? Is it the fact that I used wp-cli to install the shop pages that makes it different?

    I have now attempted to follow your directions, but after “Appearance” while there are a half dozen choices (including for example ‘Themes’, ‘Customize”, ‘Widgets’, ‘Menu’… ), there is no Editor option and I don’t see anything that lets me edit existing files anywhere under “Appearance”. I’m using WP 4.9.5 and WC 3.3.5

    I was planning to do it your way to validate that it works, but ultimately I’m just going to modify the styles.css file through the OS command line so I guess I’ll start working on that

    Thank you!

    It will be easier to assess your homepage and shop page when there is some content. Some test content would do.

    How to add custom css can vary a bit depending on the theme. I think for Storefront, you should go to the Appearance menu, Customize sub-menu and then choose the Additional CSS option.

    When you are there, copy and paste the css suggestion and click the “Publish” button.

    I should advise against modifying style.css because any edits will be overwritten by theme updates. Its not the recommended method.

    @lorro
    Thank you for responding.

    There is in fact substantial content (categories & products). Perhaps you need to scroll down below the white space to see it?

    With your help, I have made the changes suggested by @longnguyen, copied his code/post into the area you mention and modified each of the 3 “em” elements to “0em”. At this point I think maybe it’s a judgment call and I’m not sure my judgment alone is sufficient to decide if there’s too much or too little white space. Any feedback is appreciated.

    Thank you!

    It sounds like we are not seeing the same thing. On the home page, I can see just the header, menu, a gap and the footer. No content. On the shop page, I can see the header, a page title “Shop”, a notice that says “No products match your selection”, and the footer. I have scrolled to the bottom: nothing.

    Maybe you have something that disables access to not-logged-in users while you are building the site. Your link
    http://dragon.greetonix.com
    is redirecting me to:
    https://index.greetonix.com/
    where I am seeing as described above.

    The redirect would explain why you’re seeing the wrong page. It’s interesting how you get redirected whereas I don’t. I’ll have to look into that. Thank you for letting me know!

    @lorro The redirect should be fixed for now.

    Thanks I can see the content now. The amount of space is subjective but my view is there is a bit too much. To reduce it try this custom css:

    /* home page */
    .home #post-5.hentry {
      margin-bottom: 1em;
    }
    /* category pages */
    .woocommerce .woocommerce-breadcrumb {
      margin-bottom: 0;
    }

    at Appearance > Customize > Additional CSS

    @lorro

    OK, I have added your code. I now have all of the following as “Additional CSS”.

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

    .page-template-template-homepage .type-page {
    padding-top: 0em;
    padding-bottom: 0em;
    }

    /* home page */
    .home #post-5.hentry {
    margin-bottom: 1em;
    }
    /* category pages */
    .woocommerce .woocommerce-breadcrumb {
    margin-bottom: 0;
    }

    • This reply was modified 2 years, 5 months ago by apb1963.
    Plugin Support RK

    (@riaanknoetze)

    @apb1963 – Just to make sure, did @lorro ‘s code resolve the issue for you? Can we close this support thread? I’m asking as your last reply wasn’t clear whether you need anything else 🙂

    I was waiting to see if he had anything more to say before I closed it.

    I was also hoping someone would answer the other questions within this thread that remain unanswered, specifically the post I made right after the first person responded.

    Thanks again to all!

    Sorry I thought we’d done. I’ve just had a look and the gaps are still there same as before and they look too big to me. I can’t find the css. Its not where it should be or anywhere. If you look in the page source code (Chrome – right-click > view page source) then the css should be in a style element called: id=”wp-custom-css”. Did you take it out? If you didn’t take it out then there is something wrong.

    Why have you got the gaps and other not? I don’t really know how you have installed Storefront other than the result is non-standard. The gaps should not be there as you say. You can patch up the problems with some custom css but ultimately it may be more staight-forward to start over and do a fresh standard install. I would use ‘All-in-One WP Migration” to save the products, rebuild the site the standard way, then import the products.

    The shop page is usually at
    https://dragon.greetonix.com/shop
    but yours is at:
    https://dragon.greetonix.com/?post_type=product
    To do so, its usual to set permalinks to “post name”, not “plain”, at
    Settings > Permalinks.

    @lorro Sorry, I also assumed we were done and I began working on the site again and in the process I broke something which it will take me time to fix. Please be aware I perform all actions through wp-cli unless it’s impossible to do so (such as CSV product import). I also intend to add the CSS to a child style file which I’m assuming (rightly or wrongly) will work. I appreciate the additional insight. Thank you so much!

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Too much white space’ is closed to new replies.