Grow your CSS skills. Land your dream job.

[Solved] Horizontal scroll bar issue

  • # June 25, 2011 at 11:08 pm

    Hey everybody,

    So I’ve been having this issue with my portfolio web site and a few other web sites I’ve been working with for the last few months – whenever I re-size my browser window on my sites in the latest version of Safari for Mac for example, the ugly horizontal scroll bar shows up of course, however when I decide to scroll right I notice that a lot of the background elements of my web site just disappear or get cut off depending on how much I have to scroll to the right! The elements that get cut off disappear and leave only the body background color or image to be shown. Now I am very shaky in my knowledge of best practices when it comes to fixed, fluid, elastic layouts, and I desperately want that to change.

    Here are the links to the 2 web sites that have this issue

    http://www.kalee-eversole.com

    http://www.eversoletest.com

    To replicate exactly what I am seeing open up Safari, re-size your browser window until you get the horizontal scroll bar, scroll to the right, and you’ll immediately see what I’m talking about.

    Any input about how to re-adjust my layout to avoid this issue would be great!

    Thanks everybody!

    Kalee Eversole

    # June 26, 2011 at 12:22 am

    Firstly, nice work on your personal site, it looks great! As does the ampersand tatt :)

    The issue you’re having is to do with element widths. Have a play around with this and if your still unsure just let me know.

    # June 26, 2011 at 12:25 am

    I had a look at the code, the issue is the background is set on the body element, which has it’s width as 100%. Try putting it as your header background instead as that has a fixed width, could you add the face image to the top of the header background and have it as one image?

    # September 17, 2011 at 1:59 pm

    just looked forever and found solution…body{ overflow-x: hidden;}

    # December 3, 2011 at 12:27 am

    I’m having this problem as well. I’ve tried these recommendations to no effect. I was wondering if you ever got an answer or did you just turn off “overflow”?

    I want to know how to make the site fluid once the scroll bars appear. Any further ideas?

    Thanks.

    # April 17, 2012 at 12:11 am

    Thanks Rexcalabrese!!! The overflow-x: hidden; worked perfect for me!

    # April 17, 2012 at 12:54 am

    @Rexcalabrese @Neoone256 Using overflow: hidden; is a quick fix that can cause as many problems as it fixes. I would simply recommend giving elements appropriate widths to avoid this issue altogether.

    # October 2, 2012 at 10:52 pm

    Perhaps this is not the best solution, but it will solve the problem:

    element-with-background { min-width: your-content-width-here; }

    @keversole, I tried this in your site and it works:

    body { min-width: 1167px; }

    # February 3, 2013 at 2:25 am

    @Cucuzo : Thank so much. “min-width” solved the problem. You saved my life~ ;)

    # March 2, 2013 at 2:36 am

    I agree with @joshuanhibbert. Hiding the overflow-x works, but will only cause problems later on. Cucuzo I have a similar problem that I can’t seem to fix with ‘element{min-width: XXXpx; }’ added and still no fix.

    I just started working on this site and would love to fix it before I move deeper into the template structure.

    What am I doing wrong?

    This is the dev. version of the site. http://dev.thezdravogroup.com see for yourselves.

    Any guidance would be greatly appreciate.

    # March 2, 2013 at 10:32 am

    Such a lovely portfolio sate Kalee :)

    # March 3, 2013 at 4:10 am

    @zdravo: the solution is the same as above, in your case

    body { min-width: 960px; }

    will do the trick.

    # March 4, 2013 at 2:16 pm

    Thank you @merri :) works perfect now. ~ Cheers!

    # January 28, 2014 at 2:57 am

    Does the work for me excellently. I tried everything recently as I knew it has something to do with widths, including overflow trick ( which didn’t really work properly), and didn’t think about this nice little trick.
    Good stuff!

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".