CSS help on Penscratch theme

  • Author
    Posts
  • #2704546

    I would appreciate help with CSS on the Penscratch theme. I customized the CSS to move the header above the navigation menu and reduced the padding above the menu, but I can’t figure out what I need to change to reduce the padding below the menu.

    This is my blog: https://lindacassidylewis.com

    The blog I need help with is lindacassidylewis.com.

    #2704637

    siobhyb
    Staff

    Hi Linda,

    Nice work on customising Penscratch. :)

    To reduce the padding at the bottom of the menu, you can add the following snippet to the CSS panel of the WordPress.com Customizer:

    .site-header {
        padding-bottom: 0;
    }

    Let me know how that goes or if extra questions come up.

    #2704672

    Thank you for helping this CSS newbie, siobhyb. :-)

    #2704674

    siobhyb
    Staff

    You’re most welcome! We’re right here if extra questions come up, too.

    #2704676

    And so soon, I do have another question. I just viewed my site on my phone and saw that the header extends to the right. It’s the size recommended for the theme. Is there a way to make it move to the left when viewed on a smaller screen?

    #2704693

    siobhyb
    Staff

    Hi Linda,

    You could make use of a media query to push the header to the left on certain devices.

    The following CSS includes a media query that floats the header to the left on devices that are 960px in width or smaller:

    @media screen and (max-width: 960px) {
        .custom-header {
            left: 0;
        }
    }

    Can you give that a try and let me know how you get on?

    Thanks!

    #2704697

    It worked perfectly! Thank you again, siobhyb. :-)

    #2704698

    siobhyb
    Staff

    You’re welcome!

The topic ‘CSS help on Penscratch theme’ is closed to new replies.