- This topic is empty.
-
AuthorPosts
-
June 25, 2011 at 11:08 pm #33273keversoleMember
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
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
September 17, 2011 at 1:59 pm #87452RexcalabreseMemberjust looked forever and found solution…body{ overflow-x: hidden;}
December 3, 2011 at 12:27 am #91794gwebsterMemberI’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 #101280Neoone256MemberThanks Rexcalabrese!!! The overflow-x: hidden; worked perfect for me!
April 17, 2012 at 12:54 am #101284joshuanhibbertMember@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 #111188CucuzoMemberPerhaps 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 #123198March 2, 2013 at 2:36 am #126659zdravoMemberI 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 #126648apartParticipantSuch a lovely portfolio sate Kalee :)
March 3, 2013 at 4:10 am #126734MerriParticipant@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 #126888January 28, 2014 at 2:57 am #161266hedgehog34ParticipantDoes 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! -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.