Site Not Expanding With Browser
So I posted this yesterday, and thought I figured it out. Can anyone tell me what is happening here? If you shrink the browser to a couple hundred pixels wide, and then scroll right you will see what is happening.
I can't seem to figure this out.
Your purple background is set to width:100%, which makes sense if your site is supposed to be whatever size the browser is. But pretty much everything else seems to have a width of 980px. So when your browser is 500px, the purple box is 500px, but everything else is still 980px. You could set a min-width of 980px on #header-back so it doesn't shrink past that.
That makes sense. Now if I just got rid of #header-back I could do the same with #header-content and just place the min-width there or would that not work the same?
Actually, I placed the min-width on the #header-wrap, not sure if that's what you meant, and it seemed to fix it. I ended up getting rid of #header-back. Thanks for the advice!
Might help to do a responsive design:
In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choos...b-page-layout/
How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/
Care With Font Size: http://www.w3.org/QA/Tips/font-size
What are the best programming fonts?: http://slant.co/topics/67/~what-are-...gramming-fonts
Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/
Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/
What The Heck Is Responsive Web Design? (A super-impressive CSS3 presentation built on impress.js, demonstrating the basics of Responsive Web Design): http://johnpolacek.github.com/WhatTh...ressjs/#/title
Creating Responsive HTML5 Touch Interfaces: http://www.youtube.com/watch?v=lcD9CF0bxyk
Responsive Images: How they Almost Worked and What We Need: http://www.alistapart.com/articles/r...-what-we-need/
Responsive Tables: http://www.zurb.com/playground/responsive-tables
responsivepx – screen-size testing tool: http://responsivepx.com/
FitText.js plugin (FitText is a jQuery plugin that makes your font-sizes flexible, allowing headlines to automatically-expand to fit the available space): http://fittextjs.com/
Adapt.js - Adaptive CSS: http://adapt.960.gs/
Thanks the min-width worked like a charm after I messed around with some other CSS. It was only happening in Firefox, but it's fixed thanks! And I would do a responsive design if the client was willing to pay for it!
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)