Seventeen – Reducing white space below menu and page title

Hello,
Add the following custom CSS to customize-> Additional CSS

@media screen and (min-width: 48em){
.panel-content .wrap {
    padding-top: 20px;
}
.page.page-one-column .entry-header, .twentyseventeen-front-page.page-one-column .entry-header, .archive.page-one-column:not(.has-sidebar) .page-header {
    margin-bottom: 20px;
}
}

Let us know if you need help with anything else!

No that didn’t work either – I tried modifying and reducing from 20px to 10px but made no difference. Not sure what problem is. I have very few plug-ins and no other modifications to CSS.

I can’t find the given CSS when I inspect the element.
DO you add it properly at customize-> Additional CSS?

Ok that worked – I plugged into wrong CSS panel. But now it’s too close together. I tried to modify the pixel count but it didn’t work. What element do I modify to alter the size of the space in between? Thanks.

Also what you sent only modified home page – what is needed to modify all pages in the website? Thanks.

Think I got it figured out – used code from other thread and it fixed all of the pages but I still can’t modify space on the home page. I had to use the other code to make any of it work – how do I modify space on home page.

.site-content {
padding-top: 2em;
}

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

@media screen and (min-width: 48em) {
.page.page-one-column .entry-header,
.twentyseventeen-front-page.page-one-column .entry-header,
.archive.page-one-column:not(.has-sidebar) .page-header {
margin-bottom: 0;
}
}

[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

• This reply was modified 7 years, 11 months ago by Linda.
• This reply was modified 7 years, 11 months ago by bdbrown.

check it will work for all the pages and you can increase the pixel count to increase the space.
example:

@media screen and (min-width: 48em){
.panel-content .wrap {
    padding-top: 40px;
}
.page.page-one-column .entry-header, .twentyseventeen-front-page.page-one-column .entry-header, .archive.page-one-column:not(.has-sidebar) .page-header {
    margin-bottom: 40px;
}
}

Let us know if you need help with anything else!

Tried that but get different spacing on home page from rest of pages. Ugh. How can I get home to behave like rest of pages? Thanks.

Use some variation of this:

.site-content {
     padding: 50px; 
}

body:not(.twentyseventeen-front-page) .entry-header {
    padding-top: 40px;
}

.page-header {
    padding-top: 40px;
    padding-bottom: 2em;
}

[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

• This reply was modified 7 years, 11 months ago by bdbrown.

@garmischgirl you stated you used code from other page. What other page?

Anyone,

I am trying to fill the pages with the garage door on the first page and want to remove the page title and all white space. Any Ideas?

https://storage.hpperformance.us/ is the site.

Thanks

Hello @treigle01 – I had located a prior post with code: https://www.ads-software.com/support/topic/reduce-whitespace-above-and-below-page-title/

I found the home page and internal pages behave differently and I didn’t resolve that issue. This was the code I ended up using – hope this helps:

.site-content {
padding-top: 2em;
}

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

@media screen and (min-width: 48em){
.panel-content .wrap {
    padding-top: 20px;
}
.page.page-one-column .entry-header, .twentyseventeen-front-page.page-one-column .entry-header, .archive.page-one-column:not(.has-sidebar) .page-header {
    margin-bottom: 10px;
}
}
@media screen and (min-width: 48em) {
	.site-content > .wrap {
		max-width: 910px !important;
	}
	.site-content > .wrap .content-area {
		max-width: none !important;
	}
}
@media screen and (min-width: 30em) {
	.page-one-column .panel-content .wrap {
		max-width: 910px;
	}
}

[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

• This reply was modified 7 years, 11 months ago by bdbrown.