problems with white space

  • noritarte

    (@noritarte)


    6 years, 2 months ago

    I have some problems with white space between various elements that I can’t solve with some css found online:
    1) on the cart page, when it’s empty, you see blank space under the footer. Example here: https://www.noritarte.it/carrello/
    2) on all pages except the home page there is a lot of space under the header. Example here: https://www.noritarte.it/international-shipping/
    3) before the footer there is a big white space that you can notice especially on mobile (desktop is ok)

    The first problem (white space under footer) is present only in the empty cart page, the second one and the third I would like to solve in all the pages of the site.
    Thanks in advance for the help

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter noritarte

    (@noritarte)

    6 years, 2 months ago

    This is one of the css I’ve tried:

    /* 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;
    }

    Jarret

    (@jarretc)

    6 years, 2 months ago

    Hi.

    1. For the cart page, this is because there isn’t enough content on the page to push the “design” of the site all the way down past the maximum height of the browser window. It is just showing the white background from the main content area of the space above the footer

    2. I think this CSS will handle the spacing

    .site .storefront-breadcrumb {
    margin-bottom: 0px;
}

    3. For the footer spacing on mobile you could try something like the following

    @media screen and (max-width: 568px) {
    .site-footer {
        margin-top: -30px;
    }
}
    Thread Starter noritarte

    (@noritarte)

    6 years, 2 months ago

    Thank you for the answer, footer spacing on mobile is perfect now, thanks.
    Also the css .site .storefront-breadcrumb works but only in some pages. In the pages managed by woocommerce (account and checkout for example) the space remains larger but I can also settle for that if it’s a complicated issue to solve.
    Many thanks for your help

    Jarret

    (@jarretc)

    6 years, 2 months ago

    This CSS should handle that

    .woocommerce-cart .site-main .entry-header, .woocommerce-account .site-main .entry-header {
    padding-bottom: 0px;
}
    Thread Starter noritarte

    (@noritarte)

    6 years, 2 months ago

    It works! Jarret, you’re super! Thanks a lot

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

The topic ‘problems with white space’ is closed to new replies.