Rahul Sah Rahul Sah - 5 months ago 14
CSS Question

Making the grid system in CSS responsive for mobile devices

I am making my grid system in CSS. I had written the following code for it and it is working fine. But i want to know how to make this layout responsive for mobile devices less than 600px. The code snippet is shown below.

.grid-container {
width: 100%;
max-width: auto;
}

/*-- our cleafix hack -- */
.row:before,.row:after {
content: "";
display: table;
clear: both;
}

[class*='col-'] {
float: left;
min-height: 1px;
width: 16.66%;
/*-- our gutter -- */
padding: 12px;
background-color: #FFDCDC;
}

.col-1 {
width: 16.66%;
}

.col-2 {
width: 31%;
}

.col-3 {
width: 48%;
}

.col-4 {
width: 66.66%;
}

.col-5 {
width: 83.33%;
}

.col-6 {
width: 100%;
}

.outline,.outline * {
outline: 1px solid #F6A1A1;
}

/*-- some extra column content styling --*/
[class*='col-']>p {
background-color: #FFC2C2;
padding: 0;
margin: 0;
text-align: center;
color: white;
}`enter code here`


Please help me out.

Answer

To make it work on different sizes you must use media queries. More info: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

At the moment i know about two methods of work:

1) Class manipulation: overwrite class attributes where media query is matched, ex:

 @media only screen and (max-width: 600px)  {    //apply if screen is < 600px
      .col-5 { width: 50% }       // overwrite the width of 83.33% to 50%
 }   

In html it would like as class="col-5"

Advantages: simpler to maintain, just one class to add

Disadvantages: you cant set different size for every screen-width


2) Different classes for different sizes and dives like :

 @media only screen and (max-width: 600px)  {    //apply if screen is < 600px
      .col-mob-3 { width: 50% }   //only if the max-width < 600 set attr
 }

In html it would like for example as class="col-5 col-mob-3"

Advantages: you can even change the size on every breakpoint

Disadvantages: most verbose


Common breakpoints for me are:

- up to 320 ? mob portrait : @media only screen and (max-width: 320px) {}

- up to 480 ? mob landscape : @media only screen and (max-width: 480px) {}

- up to 680 ? mini tab + landscape : @media only screen and (max-width: 680px) {}

- up to 810 ? Tablets and Facebook : @media only screen and (max-width: 810px) {}

- up to 1024 ? Computer : @media only screen and (max-width: 1024px) {}

- over to 1280 ? Large screen : @media only screen and (max-width: 1280px) {}

Here an example : http://socialtab.it/beta/chiusagrande/public/css/grid.css

For others are : http://css-tricks.com/snippets/css/media-queries-for-standard-devices/


Tips:

Use % when possible, it will look better. Set max-width: 100% on columns to prevent overflow if you are using "pixel" grid (not %, fluid). For the container i love this set:

.container {
   width: 1060px;
   max-width: 96%;
   margin: 0 auto;
}

I'm just learning as you :D

Sorry for bad English, I've tried my best D:

Comments