Jump to content

Change Site Size Depending On Resolution?


ShaneW1992
Go to solution Solved by adam_bray,

Recommended Posts

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?

Link to comment
Share on other sites

  • Solution

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 by adam_bray
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by ShaneW1992
Link to comment
Share on other sites

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 by adam_bray
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.