C S Psyco

Do you wonder how a web page is changing it's a style and look on different screen size. It is done by using the @media  rule that used in CSS to change the style and looks of two web pages. Using the @media rule we can set you different styles for different devices. See the following program here I set two different width for three different screens namely desktop/laptop, tablet and smartphone. /* For mobile phones: */ [class*="col-"] { width: 100%; } @media only screen and (min-width: 600px) { /* For tablets: */ .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;} } @media only screen and (min-width: 768px) { /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: