twenty sixteen – above the fold space

  • Resolved Tiredtraveller

    (@tiredtraveller)


    9 years, 6 months ago

    I have installed Twenty sixteen on a site as the new theme as it is much more modern feeling and responsive compared to the previous custom made template plus the mobile compatibility is great. Overall I’m very happy with it, but need to make a few tweaks.

    Here are links to the current install and one using the waybackmachine to see the difference in above the fold content with the new theme.

    https://www.wmimmigration.com/immigration-uk/
    https://web.archive.org/web/20140708031647/https://www.wmimmigration.com/immigration-uk/

    There is a lot of wasted space above the fold and very little information provided here. This I think is due to the thick border spaces in particular

    1) The space between the menu and the background outline
    2) The space between the header and the menu
    3) The space between the header and where the page text/sidebar starts.

    Is it just matter of adding a child theme and reducing some values in the css to shrink this wasted above the fold space?

    Is there going to be any menu options coming out in Twenty sixteen to adjust this space in the near future?

    If I create a child theme to reduce this space will that mean my site won’t avail to the updates coming out for twenty sixteen as there is ongoing updates at the moment tweaking different parts of the theme?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Is it just matter of adding a child theme and reducing some values in the css to shrink this wasted above the fold space?

    Yes, let us know if you need help with the CSS necessary. You’ll have to consider what will happen on smaller devices too.

    If I create a child theme to reduce this space will that mean my site won’t avail to the updates coming out for twenty sixteen as there is ongoing updates at the moment tweaking different parts of the theme?

    Nope.

    Thread Starter Tiredtraveller

    (@tiredtraveller)

    Thanks for the feedback Andrew. Yes any suggestions on the CSS would be appreciated.

    If the CSS changes reduced the white spaces on the desktop for between the menu, header and page text would this only reduce this space on the mobile platform (which would be fine) or is there other changes that may occur on mobile?

    Thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I just checked out the way the white space works and it uses percentages:

    @media screen and (min-width: 61.5625em) {
    .site-header {
        padding: 5.25em 4.5455%;
    }
}

    Which looks like it’s preventing the ‘above the fold’ issue, because the percentage will always be in relation to the device width and height.

    Anyway, to reduce this space, try adding this to your Child Theme style.css file:

    .site-header {
    padding-bottom: 0;
    padding-top: 0;
}

    This will apply to both mobile and desktop.

    Thread Starter Tiredtraveller

    (@tiredtraveller)

    Thanks Andrew

    I think it looks a bit better now above the fold.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘twenty sixteen – above the fold space’ is closed to new replies.