Reputation: 15628
I'm having issues to optimize my page for smaller screen resolutions. When I take my browser window (Google Chrome) and shrink it, the menu bar pops onto a second line way before there's no more room for it on top. i would like the black area on the left of the logo to shrink first to be aligned with the content box and then only once there's no more room for the content, there also is no more room for logo and menu on top... but how can I get this achieved I'm wondering? Thanks for help!
The url: http://quaaoutlodge.com/drupal-7.14/?q=lodge
Upvotes: 0
Views: 87
Reputation: 15628
I actually had to remove the inner padding on the left side of the logo and instead give the "toplogo" a fixed width (in pixels) with auto margin on either side to get it centered on the page. That seems to give me what I was looking for.
Upvotes: 0
Reputation: 5364
You may want to use CSS3 media queries. Using them you can specify separate styles for different browser sizes. More info about responsive design you can find here: http://www.w3.org/TR/css3-mediaqueries/#width
Upvotes: 1