WordPress.org

Forums

Twenty Fourteen
White space at top in mobile that isn't in regular? (5 posts)

  1. ZooBobby
    Member
    Posted 10 months ago #

    When I view my site in a mobile browser, there is a block of white space under the top black title bar and the feature image on the static page that is set as the front page.

    The white space is not there in the regular desktop version.

    I pulled up the theme demo site and viewed a full-width page to see if this was just how the theme works, but the demo site doesn't have the gap. I can't figure out what element or setting controls this.

    I have not done much by way of modification, only changed a few colors in the CSS.

    The site is at: http://www.denverzooaudiotour.com

    I also posted a graphic with screenshots to explain the issue I am encountering at i.imgur.com/A0hGHVZ.jpg in case I am not explaining clearly.

  2. ZooBobby
    Member
    Posted 10 months ago #

    Additional info I came across while becoming even more exasperated:

    1. The white gap is 48 pixels high.

    2. This only happens on the page that is set as the front page of the site. If I pick a different page to be the static front page, and then I view the page that used to be the front page (and was having the issue) there is now magically no gap between the black title bar and the featured image.

    I really hope someone knows how to fix this. I have spent hours trying to fix this, when I should have been done with the whole site by now.

  3. stephencottontail
    Member
    Posted 10 months ago #

    Did you change the front page since you took the screenshot? This is what I see when I visit your site (on iOS 7, Mobile Safari): http://imgur.com/ZyFPGI9. I noticed that it looks a bit different from the page that's shown in the graphic you posted.

  4. ZooBobby
    Member
    Posted 10 months ago #

    After about seven hours, I sort of figured it out, and sort of found a workaround. The part causing the problem is the .content-area element in style.css. On all other pages, it doesn't make a gap, but for a page set as the static front page, it does.

    The workaround I used was twofold. I added a section of CSS to only affect the page in question (in this case, page id 9) as follows:

    body.page-id-9 .content-area {
    padding-top: 0px;
    }

    The problem was that then, on the desktop version, it shoved the featured image upwards by 48 pixels, hiding part of it under the top black title/nav bar. So I couched that code above inside of a @media only screen and (max-device-width: 720px) to try to make that fix apply only to mobile devices.

    So, altogether --

    @media only screen and (max-device-width: 720px){
    {
    body.page-id-9 .content-area  {
    padding-top: 0px;
    }
    }

    Someone else looking to make this fix would need to swap out the number 9 above with the number of the page they set as the static home page.

  5. ZooBobby
    Member
    Posted 10 months ago #

    If somebody knows a better way, I would still appreciate it. I never seem to be able to get much help here.

Reply

You must log in to post.

About this Theme

About this Topic