How to make heading space smaller?

earthmorgan · Member · Mar 21, 2016 at 6:59 pm
Copy link

Add topic to favorites
I love my theme, but the heading space on my website is too large, to the point where you have to scroll down to see any content on many screens.

Is there a way to make the header shorter, vertically speaking? I’m running premium so I have CSS control.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 22, 2016 at 1:46 am
Copy link
Hi, you can give this a try. Given the size of the logo and the site title, we can’t cut too much as there simply isn’t that much we can cut. Give this a try though and see if this helps.
```
.site-title {
    margin-top: 0;
    margin-bottom: 0;
}
.site-description {
    margin-bottom: 0;
    margin-top: 0;
}
.site-branding {
    padding-top: 1em;
    padding-bottom: 1em;
}
```
earthmorgan · Member · Mar 22, 2016 at 1:58 am
Copy link
Hey, thanks so much! That did the trick.

Any similar advice for the gap between the nav bar and the body? ;)
thesacredpath · Member · Mar 22, 2016 at 8:21 am
Copy link
Super, glad that worked. On the space between the nav and content, add this and adjust the top margin as desired.
```
.site-content {
    margin-top: 4.5em;
}
```
earthmorgan · Member · Mar 22, 2016 at 2:39 pm
Copy link
Made my day! Thanks again.
thesacredpath · Member · Mar 22, 2016 at 5:17 pm
Copy link
You are welcome.
earthmorgan · Member · Mar 23, 2016 at 2:43 pm
Copy link
One more question, CSS wizard: How about changing the padding between the body and the right sidebar? It’s a little too large at the moment.
thesacredpath · Member · Mar 23, 2016 at 7:56 pm
Copy link
Sure, we can do that. Due to the way the CSS is structured, we need to use a Media Query to limit this change to screen/window widths 800px and wider so that below that point, when the sidebar moves below the content, we don’t end up with a bunch of white space to the right of the content. Add this to the bottom of your custom CSS. Originally the right margin was 35%.
```
@media screen and (min-width: 800px) {
.site-main {
    margin-right: 30%;
}
}
```
earthmorgan · Member · Mar 23, 2016 at 8:00 pm
Copy link
Fantastic! Thanks so much for your time and expertise. The site (I think) looks 5x better than it did last week.
thesacredpath · Member · Mar 23, 2016 at 8:11 pm
Copy link
You are welcome, and your site is looking great!

No items found.