Support » Theme: Storefront » Storefront White space between last row and bottom of page

  • I have installed the Storefront theme, and made a child theme out of it. I have managed to remove the content info at the bottom of the page – but a white space remains between my last row (made with page builder) and the bottom of the page. I can’t get rid of it. I have tried several suggestions on forum, but none has worked. How do I remove this white space?
    An alternative (if it is not removable) could be to change its colour so that it blends in with the last row – but how do I do that?
    Best regards
    Carl

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi Carl,

    can you please provide your URL so that we can inspect the particular white space?

    The site is under construction, so it can be inspected by anyone but me.
    However – if I right click on the white space and use Inspect, what should I copy (I can paste it here so that you can look at it)?
    Here is some of the codes I see, when using Inspect:

    @media (max-width: 67.141em)
    .col-full {
    margin-left: 2.618em;
    margin-right: 2.618em;
    padding: 0;
    }
    @media (min-width: 768px)
    .col-full {
    max-width: 67.141em;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2.618em;
    box-sizing: content-box;
    }
    * {
    box-sizing: border-box;
    }
    user agent stylesheet
    div {
    display: block;
    }
    Inherited from body.home.page.page-id-28.page-template.page-template-template-fullwidth.page-template-template-fullwidth-php.logged-in.admin-bar.wp-custom-logo.siteorigin-panels.siteorigin-panels-home.right-sidebar.woocommerce-active.customize-support
    body, .secondary-navigation a, .onsale, .pagination .page-numbers li .page-numbers:not(.current), .woocommerce-pagination .page-numbers li .page-numbers:not(.current) {
    color: #000000;
    }
    body, button, input, textarea {
    color: #43454b;
    line-height: 1.618;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    }
    body {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    font-size: 1em;
    }
    body, button, input, select, textarea {
    font-family: “Source Sans Pro”,HelveticaNeue-Light,”Helvetica Neue Light”,”Helvetica Neue”,Helvetica,Arial,”Lucida Grande”,sans-serif;
    }
    Inherited from html
    html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    }
    Pseudo ::before element
    @media (min-width: 768px)
    .col-full:after, .col-full:before {
    content: “”;
    display: table;
    }
    Pseudo ::after element
    @media (min-width: 768px)
    .col-full:after {
    content: ” “;
    display: block;
    }
    @media (min-width: 768px)
    .col-full:after, .col-full:before {
    content: “”;
    display: table;
    }
    @media (min-width: 768px)
    .col-full:after, .footer-widgets:after, .site-content:after {
    clear: both;
    }

    To the right of this, I also get the following information:

    Show all
    box-sizing:
    content-box
    ;
    color:
    rgb(0, 0, 0)
    ;
    display:
    block
    ;
    font-family:
    “Source Sans Pro”, HelveticaNeue-Light, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif
    ;
    font-size:
    16px
    ;
    font-weight:
    normal
    ;
    height:
    1065.02px
    ;
    line-height:
    25.888px
    ;
    margin-left:
    41.888px
    ;
    margin-right:
    41.888px
    ;
    max-width:
    1074.26px
    ;
    padding-bottom:
    0px
    ;
    padding-left:
    0px
    ;
    padding-right:
    0px
    ;
    padding-top:
    0px
    ;
    width:
    876.25px
    ;
    word-wrap:
    break-word
    ;
    -webkit-font-smoothing:
    antialiased
    ;

    In the top box the following line is high lighted:
    <div class=”col full”>…</div>

    Anyone that can help?
    I can Inspect any area that you want to look at, and publish the result here.
    I can not make the site public yet though.

    Without your URL it’s quite hard to understand what you’re referring to and posting blocks of code usually doesn’t help much.

    Can you share a screenshot?

    I could share a screenshot – if I knew how to attach a file.
    It didn’t work just to paste a screenshot, but perhaps it is possible to attach a file with the screenshot – do you know how to do that?

    You can’t attach screenshots, but you could upload the screenshot somewhere (your server, imgur or whatever) and then share the link.

    Use google developer tools and inspect element with white space, then find it in your css file and change

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Storefront White space between last row and bottom of page’ is closed to new replies.