Jump to content
Sign in to follow this  
mikec415

How To: Fixed-Width Layout

Recommended Posts

mikec415

How do I change my layout so it looks the same regardless of the size of the browser? Ideally I would like it to remain the same even when viewed on mobile. I have tried playing around with widths in the css but I can't seem to get it quite right. Any ideas or suggestions? Here is my site: http://www.dwillzmusic.com Thanks again for the help! Mike

Share this post


Link to post
Share on other sites
catrina

This question sounds weird, but I'll ask it, anyway: By same size, you don't want it to get smaller or get bigger regardless of browser or monitor screen?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
mikec415

Right now if you go my site and make your browser much smaller it distorts the elements of the site forces some of the sidebar items to the bottom of the page. I would like to prevent this from happening. So I guess that means making it proportional to the size of the browser or fixing the size so it doesn't adjust. Whatever you might suggest to keep the look of the site no matter what the browser size might be. Also, for mobile phones I would like it to appear in the same format but much smaller to adjust to an iphone-sized screen. Let me know if this helps at all. Thanks.

Share this post


Link to post
Share on other sites
Kate

Hi Michael, Usually the iPhone (well, Safari), translates most sites well. But, there are also plugins you can get to have a mobile version of your WP site. Second, for your issue: try something like this in your custom CSS:

#page{min-width:960px;}

Change the min-width to whatever the width of your main content is. Then when the screen is minimized, it won't get any smaller than 960px.

Share this post


Link to post
Share on other sites
mikec415

Hey Kate, Thanks for your help. Here is the css for the general structure of the site. I tried your suggestion but it didn't work. The items in the tertiary side bar still get pushed below the page when I minimize my browser. Same thing happens when viewed on my phone as well. Let me know what you think. body { background-color:#ececec; font-family:'Droid Sans', arial, sans-serif; color: #777; } #page { margin-top: 255px; margin-left: auto; margin-bottom: 255px; margin-right: auto; padding:10px 30px 30px 0; background-image:url('http://www.dwillzmusic.com/wp-content/uploads/2011/06/trans2.png'); z-index: 0; width: 1000px; height: 555px; -moz-border-radius: 15px; border-radius: 15px; border-style:solid; border-width:5px; border-color:red; } #wrap { margin:0 0 0; padding:0 0; overflow: hidden; } #main { float: left; overflow: hidden; width: 70%; } #content { width: 100%; float: none; } #tertiary { width: 30%; float: right; overflow: hidden; margin-top:18px; } #colophon { width: 70%; float: left; padding:30px 0 0; overflow: hidden; font-size: 0.8em; }

Share this post


Link to post
Share on other sites
cmunns

If you have borders on any of those elements the 70% + 30% is not going to work. You'd need to back it off a touch to account for any borders, padding, margins, etc.

Share this post


Link to post
Share on other sites
mikec415

I took out the borders and tried Kate's suggestion again. I set the widths to pixels instead of percentages. Still no luck.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×