WordPress.org

Forums

[Theme: Twenty Fourteen] Horizontal scrollbar when adding header image (21 posts)

  1. flipthealley
    Member
    Posted 11 months ago #

    I've installed the Twenty Fourteen theme. When I add a header image, a horizontal scrollbar shows up at the bottom of the screen (a very short scroll: maybe 5px to the right side). When I scroll down, the horizontal scrollbar goes away as soon as I'm passed the header image.

    The size of the header image is exactly as prescribed (1260x240px), and I didn't make any changes to the CSS. When I resize my browser, the scrollbar goes away when I resize it to about half of the screen. I see the problem only in Chrome not in IE.

    I would like the horizontal scrollbar to not appear. I'd appreciate any help with this :)

  2. .
    Member
    Posted 11 months ago #

    Could you please provide us a link to the site? Actually see the problem would make it easier to attempt some solutions.

  3. flipthealley
    Member
    Posted 11 months ago #

    Sure. The website is: http://www.remcorowaan.com

  4. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Does this occur on a particular screen size? Have you tried deactivating all of your plugins to explore whether any could be responsible?

  5. flipthealley
    Member
    Posted 11 months ago #

    My screen resolution is 1280x800. I tried deactivating all of the plugins, and the problem is still there.

  6. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Edit: Can you try deactivating your browser addons

  7. flipthealley
    Member
    Posted 11 months ago #

    Done. Problem is still there.

  8. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Could you provide more information on the steps to replicate the problem?

  9. flipthealley
    Member
    Posted 11 months ago #

    I've installed the Twenty Fourteen theme, added some posts and (standard) widgets. As soon as I added a header image the problem with the horizontal scrollbar appeared.

  10. .
    Member
    Posted 11 months ago #

    I'm not able to replicate teh problem on my end. Could you link us to a page where the issue is present?

  11. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Is this issue in the dashboard?

  12. flipthealley
    Member
    Posted 11 months ago #

    The problem is present on the homepage: http://www.remcorowaan.com

    A screen shot: http://i.imgur.com/WC5S1b4.png

  13. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Are you zoomed in? Press CTRL + 0

  14. flipthealley
    Member
    Posted 11 months ago #

    Nope, I'm not zoomed in.

  15. .
    Member
    Posted 11 months ago #

    A temporary solution would be to hide the horizontal scroll:

    html {
    overflow-x: hidden; /* hide x-coordinate (horizontal) scroll */
    }

    When I get home from work, I'll look more into this to see whether it's a problem with the theme itself or your setup. I can't really look deep into this now at work, sorry.

  16. flipthealley
    Member
    Posted 11 months ago #

    Thank you for the temporary solution, it works perfectly fine!

    I´m really curious about the actual problem, because I think I have a pretty standard setup.

  17. .
    Member
    Posted 11 months ago #

    Update:

    Please replace that html overflow-x hidden code with this:

    @media screen and (min-width: 783px) {
         .primary-navigation a {
              white-space: normal;
         }
    }

    There appear to be some conflict going on with the .primary-navigation's float:right and .primary-navigation a's white-space:nowrap.

    Your issue is resolved when we either
    -- replace the .primary-navgiation float:right with text-align:right (in terms of child theme CSS, it would be float:none then text-align:right),
    -- or if we set the .primary-navigation a white-space to white-space:normal (the default of the theme is white-space:nowrap)

    I cannot reproduce the problem on my local installation for the life of me; so I don't think that it's a problem with the theme. Is there anything among your customization or plugins that might have caused this weird bug?

  18. flipthealley
    Member
    Posted 11 months ago #

    Thanks for your help. I've changed the code and it works fine.

    I've been thinking about plugins or customization that might have caused the bug, but I really can't come up with anything. I remember the bug to be there from the early beginning when I created the blog. Maybe it has something to do with the content in the (right) side-bar (The Bio with picture) or the content of the blog posts (video's with a particular size and setting)?

  19. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    I cannot reproduce the problem on my local installation

    Can you reproduce the problem on OP's live site and if so, was there anything different you had to do to replicate it? I can't replicate the issue at all.

  20. .
    Member
    Posted 11 months ago #

    Maybe it has something to do with the content in the (right) side-bar (The Bio with picture) or the content of the blog posts (video's with a particular size and setting)?

    Those were the among the first things I check. I'm positive that they aren't the problem.

    The only issue I see is that being an SEO marketeer, your use of <img> tags doesn't follow standard SEO recommendation. But that has nothing to do with this problem.

    Can you reproduce the problem on OP's live site and if so, was there anything different you had to do to replicate it? I can't replicate the issue at all.

    3** conditions are needed to reproduce the problem on his live site:

    • only happen in Google Chrome, (though admittedly I was lazy and only tested on IE, Firefox, and Chrome :P)
    • only happen from 783px to 1284px screen width,
    • .primary-navgiation has to be float:right AND .primary-navgiation a has to be white-space:nowrap. (must be both, just changing the float rule to float:none + text-align:right OR changing white-space:nowrap to white-space:normal would fix it)

    **(And a fourth condition: must be his site)

    The problem is that something is causing an overflow when all 3 of those contions are met. Hence the code I provided at the post above . . . it patches the problem by removing one of the 3 conditions required for it to occur.

    I tried to compare his CSS with the original, even took a look at his child-theme CSS here. I didn't find anything suspicious :/

  21. iLHP
    Member
    Posted 4 months ago #

    Thank you so much for your help!

    html {
    overflow-x: hidden; /* hide x-coordinate (horizontal) scroll */
    }

    We at http://www.ilovehatephoto.com suddenly had the same problem and the first code you provided above helped us. Much appreciated!

Reply

You must log in to post.

About this Topic