Sketch Theme removing excess space at bottom of pages

  • Unknown's avatar
    melanieianderson · Member ·

    Hi!

    In the Sketch Theme, at the bottom of all of the pages in this site in both regular web browsing and mobile view, there is extra space (~4-5 lines of nothing) before the footer that I’d like to remove to make it look cleaner. Is there a way to do this with CSS?

    Thanks,
    Melanie

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thisisklove · Member ·

    Hi Melanie,

    There are 24px of top margin on the site-footer class. You can cancel that out in your custom CSS as follows:

    .site-footer {
  margin-top: 0
}

    Try that, and see if it tightens it up to your liking.

    Hope this helps!

  • Unknown's avatar
    melanieianderson · Member ·

    Hi!

    I tried that and there’s still a lot of excess space – I didn’t see a difference after I added this code. Any other ideas? :)

    Thanks for your help!
    Melanie

  • Unknown's avatar
    thisisklove · Member ·

    I’m seeing that the above CSS code you added helped to remove space above the footer, but there’s also a lot of excess space below the footer. Did you want to get rid of that as well? If so, you could add this:

    #page {
  padding-bottom: 0;
}

    There’s also an element called “Footer” that’s not being used. If you don’t plan on using this element at all, you could hide it like this:

    footer {
  display: none;
}

    Again, make sure you absolutely don’t want to use that footer section if you’re going to add the above CSS.

    Finally, if you’d like to tighten it even more, you could add this:

    .hentry {
  margin-bottom: 0;
}
  • Unknown's avatar
    melanieianderson · Member ·

    Fantastic! This is exactly what I was looking for – all 3. Thanks so much! :)

    Melanie

  • Unknown's avatar
    thisisklove · Member ·

    You’re very welcome :)

  • The topic ‘Sketch Theme removing excess space at bottom of pages’ is closed to new replies.