Seventeen – Reducing white space below menu and page title

  • Linda

    (@garmischgirl)


    7 years, 11 months ago

    Hello All – I’m using twenty seventeen with no child theme and want to reduce white space below the menu and page titles. I tried using the suggested code on prior post – see below – but it made no difference. Any other suggestions? Here is site: https://www.back40builders.com/

    Prior thread: https://www.ads-software.com/support/topic/reduce-whitespace-above-and-below-page-title/

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

.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.]

    Sorry about confusion about where to post topic. I posted below prior resolved topic too.

    • This topic was modified 7 years, 11 months ago by bdbrown.
Viewing 11 replies - 1 through 11 (of 11 total)

  • 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!

    Thread Starter Linda

    (@garmischgirl)

    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?

    Thread Starter Linda

    (@garmischgirl)

    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.

    Thread Starter Linda

    (@garmischgirl)

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

    Thread Starter Linda

    (@garmischgirl)

    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!

    Thread Starter Linda

    (@garmischgirl)

    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

    Thread Starter Linda

    (@garmischgirl)

    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.
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Seventeen – Reducing white space below menu and page title’ is closed to new replies.