white space on main page

maryellentc · Member · Aug 27, 2015 at 7:28 pm
Copy link

Add topic to favorites
i’m trying to eliminate white space on my main page. white space at the very top and white space between the menu bar and the main box. any suggestions?

The blog I need help with is: (visible only to logged in users)
maryellentc · Member · Aug 27, 2015 at 7:29 pm
Copy link
i’m also trying to eliminate white space below the main text on this front page, if anyone knows how to do that.
maryellentc · Member · Aug 27, 2015 at 7:53 pm
Copy link
AND the white space between the nav bar and the site title. help!
thesacredpath · Member · Aug 27, 2015 at 8:02 pm
Copy link
Hi there, for the space between the menu and content, that is bottom margin on the header div. Add the following CSS and adjust the bottom margin as desired.
```
.site-header {
    margin-bottom: 36px;
}
```
On the space below the content, are you talking about the space between the white area and the blue footer widget area?

if the space between the white area and blue widget area, there are two declarations producing that gap. One a bottom margin on the hentry div and the other a bottom margin on the content area div.
```
.hentry {
    margin-bottom: 55px;
}
.content-area {
    margin-bottome: 34px;
}
```
I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.
thesacredpath · Member · Aug 27, 2015 at 8:04 pm
Copy link
Between the title/description and menu, add this and adjust.
```
.site-branding {
    padding-bottom: 34px;
}
```
maryellentc · Member · Aug 27, 2015 at 8:16 pm
Copy link
thank you SO SO MUCH! that is perfect. there is this little bit of space right above my main image on the main page. is there a way to cut that out?
thesacredpath · Member · Aug 27, 2015 at 8:57 pm
Copy link
Super.

The white space at the top is the vacant div for the page title. What I’m going to give you below is a page-specific solution that will take that out for only this page since we don’t want to take away the titles on the other pages, such as about, etc.
```
.page-id-62 .entry-header {
    display: none;
}
```
the unique page id that I have in the selector above is in the opening body HTML tag in the source code of the page.
maryellentc · Member · Aug 27, 2015 at 9:45 pm
Copy link
perfect!! thanks again!!
thesacredpath · Member · Aug 28, 2015 at 12:08 am
Copy link
You are welcome.

No items found.