Change Site Size Depending On Resolution?

[ShaneW1992]

Hello there,

 

I'm updating my mothers site for her business and I think I'm going to run into a problem. I use nVidia surround to span my desktop across all three monitors (5030x900), so I'm fine with the current layout as long the the users resolution is > 1600x900 (or a tad lower). But I'm not sure how it looks so far at, say, 1024x768 (http://gamer-cafe.net/juliesjungle/index.html) without disabling two of my monitors in order to change my resolution to a single screen every time I wish to check how the layout fits to a lower resolution.

 

 

Is there a Javascript/CSS solution to this if it is a problem?

[adam_bray]

What's wrong with resizing the browser window?

 

Look at CSS media queries to handle different screen sizes with devices such as tablets and smartphones.

 

A couple of things with your code -

1. To center align items with CSS you should use margin: 0 auto; the method you're using now doesn't work on smaller screens
2. <p> elements should be used for different paragraphs, not to simply wrap a whole block of text. Where you're using <br /><br /> between different paragraphs, you should simply end one paragraph and start the next.
3. Your navigation should really be in a list, rather than <a>'s on their own

Edited April 15, 2014 by adam_bray

[ShaneW1992]

Can you use z-index with margin: 0 auto;? Or would you float the element inside the main content instead? Sorry, I'm used to doing it the way you've spotted aha

Edited April 15, 2014 by ShaneW1992

[adam_bray]

The problem with what you have now is that it's not very flexible, which is what you've identified yourself.
 
Using margins and positioning like you have is a strange way to build the page. Typically the layout you're trying to build can be done simply with 3 floated elements inside a centered container. Here's a quick codepen with the basic code - http://codepen.io/lawnch/pen/xsqfJ/

 
I also have a layout tutorial on my blog if you want a longer explanation - here.

[ShaneW1992]

Ahh, thanks! I'll have to read your tutorial, expand my knowledge a little bit

 

 

I've changed everything to inside one container, and floated them accordingly (probably a little messy still, but it was definitely easier). Now I'm having issues with centring the header image.

 

 

I can center it inside the container <div>, but outside inside its own <div> the margin: 0 auto; doesn't work. Nor does align="center" when I removed it from the <div>

 

 

 

EDIT: Never-mind, got it centered now! Thanks  so much for the help, and tips

Edited April 15, 2014 by ShaneW1992

[adam_bray]

Looks like you're getting the idea. All that's missing for the header to work is a width. If you do this then it'll work -

#headerimage {
margin: 0 auto;
width: 90%;
}

Also, with margin: 0 auto; it's using the web developers compass.. meaning the margin is being assigned like so -

margin: top right bottom left; /*Explanation line - invalid code*/
margin: 0 auto 0 auto;

So by assigning 0 & auto you're saying the vertical margin = 0 and the horizontal margin = auto (it repeats if you only specify one vertical or one horizontal rule).

 

In your code you want a 130px top margin, you can do that like so -

margin: 130px auto 0; /*use this*/

Which translates to

margin: 130px auto 0 auto;

/*OR*/

margin-top: 130px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

Edited April 15, 2014 by adam_bray

[ShaneW1992]

Sorry for opening this back up, not a problem, just wanting a little further advice if possible to make sure I understand when & where to use different methods

 

 

I have another site that I'm working on (http://gamer-cafe.net/), for that I use the other method of;

position: absolute;
left: ____;
margin-left: ___;
z-index: ___;

Would using the margin: 0 auto; and floating elements accordingly benefit me better here for a cleaner layout, or would the current method be better for me this time around?

[adam_bray]

Use margin: 0 auto; & floated elements