CODEWITHSUNDEEP
cssresponsive-design
Andris
Andris

Reputation: 1442

css. How to write (code) css for different window widths?

Want to know correct (the best) way how to write (code) css for different window widths.

Here is live example https://jsfiddle.net/q0ony7Lb/16/

For example, have left, right sidebars and main content (#middle).

<div id="left">Content in left div<br/></div>    

<div id="middle">Content in middle div<br/></div>

<div id="right">Content in right div<br/></div>

If widow width is less or equal to 400px, then want to show only #middle.

If width more than 400px and less than or equals to 700px, then display #middle and #left.

If width more than 700px, then display all.

At the moment doing in such way:

1) write default css (as understand "default" css applies if no other rules inside corresponding @media screen). Default css like

#left {background-color:#fff; background-repeat:repeat; background-position:left top; width:180px; height:25px; font-size:16px; font-family:Verdana; color:black; border-style:solid; border-width:1px; border-color:#000; text-align:left; padding:0px 0px 0px 0px; }

2) For certain window width write special css rules. Like

@media screen and (max-width: 400px) {
#left, #right { display:none}
#middle { width:350px; height:75px; }    
}

@media screen and (min-width: 401px) and (max-width: 700px) {
#right { display:none}
}

As result, for example, if window width is less or equals to 400px then hide both sidebars and #middle resizes.

As i see applies css values from "default" and if inside @media screen and (max-width: 400px) { exists different values from "default", then applies different values (different values change "default" values).

Seems all works. But may be some better way how to do all?

Another way may be to write (repeat) whole rules for each width of window. And do not write "default" values. But in such case code would be longer....

Upvotes: 0

Views: 172

Answers (1)

Felix A J
Felix A J

Reputation: 6490

One suggestion in the above code.

Since #right { display:none} applies for all widths less than 700, you can add it in @media (max-width:700px).

Use max-width media queries in descending order and keep changing the styles for the lower width screens.

https://jsfiddle.net/afelixj/q0ony7Lb/17/

Upvotes: 2

Related Questions