CSS help on Penscratch theme

lindacassidylewis · Member · Aug 2, 2016 at 3:02 am
Copy link

Add topic to favorites
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: (visible only to logged in users)
siobhyb · Member · Aug 2, 2016 at 6:33 am
Copy link
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.
lindacassidylewis · Member · Aug 2, 2016 at 4:13 pm
Copy link
Thank you for helping this CSS newbie, siobhyb. :-)
siobhyb · Member · Aug 2, 2016 at 6:39 pm
Copy link
You’re most welcome! We’re right here if extra questions come up, too.
lindacassidylewis · Member · Aug 2, 2016 at 8:28 pm
Copy link
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?
siobhyb · Member · Aug 3, 2016 at 10:27 am
Copy link
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!
lindacassidylewis · Member · Aug 3, 2016 at 4:39 pm
Copy link
It worked perfectly! Thank you again, siobhyb. :-)
siobhyb · Member · Aug 3, 2016 at 4:42 pm
Copy link
You’re welcome!

No items found.