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
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!
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?
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?
@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.
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.
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
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.
I want to know how to make the site fluid once the scroll bars appear. Any further ideas?
Thanks.
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.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; }@Cucuzo : Thank so much. "min-width" solved the problem. You saved my life~ ;)
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.
Such a lovely portfolio sate Kalee :)
@zdravo: the solution is the same as above, in your case
will do the trick.
Thank you @merri :) works perfect now. ~ Cheers!