Stratford Theme – Large Unexplained White Space at Top

  • Unknown's avatar
    plattercats · Member ·

    There is a large white gap at the top of each page upon load. When the window is resized, the gap disappears and the page functions normally. Any idea what could be causing this?

    There is nothing in that space under customization and I’ve gone through the CSS and removed any extra space from the top. Additionally, in CSS preview (SiteOrigin CSS), the gap does not show up.

    Please help! Link to site: https://matthewnashgroup.com/

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    musicdoc1 · Member ·

    Hi,

    There is a large white gap at the top of each page upon load. When the window is resized, the gap disappears and the page functions normally.

    I was able to confirm this behavior when viewing your site on my desktop screen, with the latest Firefox browser. Not only that, but when I reduce the size of the window and then return the window to full-size, the elimination of the gap that occurs when the window is reduced remains after the window is enlarged to full-size again.

    Seems like it could be a bug, so I’ve called for staff attention to the topic. Staff will respond here.

  • Unknown's avatar
    musicdoc1 · Member ·

    the elimination of the gap that occurs when the window is reduced remains after the window is enlarged to full-size again.

    although the gap returns when switching from page to page. I got the same results on Google Chrome.

  • supernovia · Staff ·

    Hi! Happy to look into this. I’ve got the theme activated on a private test site, with an exact copy of the front page content, but I can’t reproduce the issue yet.

    Can you let us know whether you’ve made any edits to the theme? I noticed your logo is displaying at a smaller size, for example. Can you let me know what steps you used to do that so we can (hopefully) replicate the issue?

  • Unknown's avatar
    plattercats · Member ·

    Hello! Appreciate your help on this!

    I installed a few different appearance editing plugins in order to adjust the theme. There are a handful of other plugins installed too for other things and I’ll be happy to list those if you believe it could be one of those if it’s nothing within the CSS or design? I’ll just list the two appearance plugins I installed.

    Easy Google Fonts
    SiteOrigin CSS

    The CSS that was edited is below:

    #main.site-main {
    padding: 0px;
    }

    .entry-header > *:first-child {
    display: none;
    }

    #masthead.site-header.alignfull {
    padding-top: 10px;
    padding-bottom: 10px;
    }

    .site-footer > *:first-child {
    display: none;
    }

    .wp-block-cover p:not(.has-text-color) {
    line-height: 49px;
    letter-spacing: 0px;
    text-indent: 0px;
    word-spacing: 0px;
    padding: 24px;
    }

    .wp-block-columns.alignfull:not(:first-child) {
    padding: 15px;
    margin: 15px;
    }

    .wp-block-group .wp-block-group__inner-container {
    padding: 15px;
    margin: 15px;
    }

    .wp-block-cover .wp-block-cover__inner-container {
    padding: 25px;
    margin: 25px;
    }

    .main-navigation #toggle-menu {
    position: inherit;
    width: 100%;
    text-align: center;
    background-color: #287fc7;
    border-radius: 0;
    }

    .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment) {
    padding: 40px;
    padding-bottom: 0px;
    padding-top: 0px;
    }

    .entry-content > .alignwide {
    padding: 25px;
    }

    .custom-logo.jetpack-lazy-image {
    float: left;
    width: 400px;
    padding-bottom: 7px;
    }

  • kokkieh · Staff ·

    Hi there,

    Is there a particular reason you want to use the SiteOrigin plugin, instead of just adding the CSS directly in the Customizer?

    First thing I’d want to rule out is that it isn’t that plugin somehow causing the issue, so can you copy your CSS into the Customizer instead, and then deactivate the SiteOrigin plugin.

    If that doesn’t make a difference, see if disabling the Insert Header and Footer plugin helps – it could be a problem with the code you’ve inserted into the header.

    Unrelated, but I notice you’re using the WP Force SSL plugin on your site. All WordPress.com sites have SSL enabled by default on all public and admin pages of the site, so that plugin is not necessary. In fact, that plugin could cause issues because some settings directly conflict with the SSL configuration already active on your site. So I recommend that you remove that plugin to avoid problems down the line.

    I also want to mention that your Business Plan gives you access to 24/7 live chat support, including support with CSS and all our themes, so you can start a chat at https://wordpress.com/help/contact instead if you’d like someone to help you troubleshoot this in real time.

  • Unknown's avatar
    plattercats · Member ·

    Thank you for all the help! I was unaware of the support included with the Business Plan, but I’ll be sure to utilize that in the future.

    Turns out a small snippet of code added to the CSS seems to have solved the issue.


    @media    (min-width: 600px){
    #primary{
    margin-top: 115px!important;

  • Unknown's avatar
    michelleorf · Member ·

    Thank you! I have been having the same issue and been going crazy all day trying to figure it out. This solved it!

  • The topic ‘Stratford Theme – Large Unexplained White Space at Top’ is closed to new replies.