Website scaling

[Heksmeester]

Hello all,

I was wondering what CSS property I can apply to a site I'm designing so that the website will scale itself automatically to the screen size it is being viewed on? For instance, it looks perfect on a 1600x* resolution, but cuts off some parts when viewed on 1366x768 for example.

Any help would really be appreciated.

SirSlothXCI

 

[sp4ceman]

Are you using a framework like bootstrap or doing it yourself

 

[Heksmeester]

Doing it myself.

 

[Thor]

Use bootstrap or foundation 4 or skeleton or grid

 

[rrh]

+1 for Bootstrap, especially if you are going Responsive

 

[Heksmeester]

Thanks for the replies. The site is nearly finished, and I have no idea how to use bootstrap. (I'm not a pro developer).

All I basically need is a line of code that will scale the site for me properly.

 

[Cam]

Use bootstrap or foundation 4 or skeleton or grid

Correct answer!

 

[battletoad]

Two ways:

1. make another css file, say 1400.css, and add something like this to your head:

<link rel="stylesheet" media="screen and (maxdevice-width: 1400px)" href="1400.css" />

2. use the same css file, and add this css rule:

@media screen and (max-width: 1400px) {
//apply rules here for the lower resolution
//E.g. say you have a wrapper div previously set to 1600px width. Over here we then write..
   #wrapper {
       width: 1200px;
       //All other previous styling will apply to #wrapper, apart from the width which will now be set to 1200px for all viewports less than 1400px
   }
}

You can mix and match @media properties, such as max-width, min-width, orientation (portrait and landscape).

I usually go route 2, and hide the divs I view as unnecessary for smaller screen sizes.

 

[Thor]

Correct answer!

 

[Heksmeester]

Thank you Sir! The only constructive answer among all.

Two ways:

1. make another css file, say 1400.css, and add something like this to your head:

<link rel="stylesheet" media="screen and (maxdevice-width: 1400px)" href="1400.css" />

2. use the same css file, and add this css rule:

@media screen and (max-width: 1400px) {
//apply rules here for the lower resolution
//E.g. say you have a wrapper div previously set to 1600px width. Over here we then write..
   #wrapper {
       width: 1200px;
       //All other previous styling will apply to #wrapper, apart from the width which will now be set to 1200px for all viewports less than 1400px
   }
}

You can mix and match @media properties, such as max-width, min-width, orientation (portrait and landscape).

I usually go route 2, and hide the divs I view as unnecessary for smaller screen sizes.

 

[Thor]

Thank you Sir! The only constructive answer among all.

I think mine was only constructive

 

[rward]

Yeah, check out css media queries.

 

[^^vampire^^]

The reason you aren't getting "constructive" feedback is because there is a lot more involved in scaling a website, especially where responsive design is involved. If you just have one wrapper div that you want to make a certain size depending on device then sure no problem, but "it looks perfect on a 1600x* resolution, but cuts off some parts when viewed on 1366x768 for example" means you will probably have a lot of other components that need to be scaled within the site to keep it looking decent and unfortunately there is no one liner to do that.

Frameworks like bootstrap (and the others mentioned) make it extremely easy to manage these expectations, but, you have to do the head work and learn them. If it takes longer than 15 mins to download bootstrap, link the css and js files and build a simple responsive grid from an the details laid out on their site it will be a lot, and you need minimal knowledge of html and css.

Unfortunately you are only willing to accept an answer that has one line to fix your problem and that's not going to happen.

 

[Pixelbender]

Yeah, check out css media queries.

Yes, media queries....

.class { width:1800px } // Anything outside a @media target is default

// This class will apply if the width is not wider than 1400
@media screen and (max-width: 1400px) {
.class { width:1400px; }
}

// This class will apply if the width is not wider than 950
@media screen and (max-width: 950px) {
.class { width:950px; }
}

 

[Noah]

width 100%