large shade tree

Navigation

Information

Recent Posts

Shade Tree Sites |Building Better Websites

Making the 960 Grid Responsive

Add to style.css

 

.img {width:100%;}

 

/* Everything before the media queries gets

applied to screen sizes greater than 960 pixels */

 

/*****************/

/* MEDIA QUERIES */

/*****************/

 

/* Tablet Screen Sizes */

@media only screen and (min-width: 768px) and (max-width: 959px) {

 

/* Resize the body */
body {min-width:767px;}

 

/* Resize the row */
.row {width:767px;}

 

/* Resize the columns */
.col_12 {width:748px;}
.col_9 {width:492px;}
.col_8 {width:556px;}
.col_6 {width:364px;}
.col_4 {width:172px;}
.col_3 {width:236px;}

}

/* Mobile Landscape Screen Sizes */

@media only screen and (min-width: 480px) and (max-width: 767px) {

/* Resize the body */
body {min-width:479px;}

 

/* Resize the row */
.row {width:479px;}

 

/* Resize the columns */
.col_12 {width:460px;}
.col_9 {width:225px;}
.col_8 {width:225px;}
.col_6 {width:225px;}
.col_4 {width:225px; margin-left:0px;}
.col_3 {width:225px; margin-left:0px;}

 

/* Fix the .last issue */
.last {
margin-left:0;
margin-right:10px;
}
}

/* Mobile Portrate Screen Sizes */

@media only screen and (max-width: 479px) {

 

/* Resize the body */
body {min-width:320px;}

 

/* Resize the row */
.row {width:320px;}

 

/* Resize the columns */
.col_12 {width:300px;}
.col_9 {width:300px;}
.col_8 {width:300px;}
.col_6 {width:300px;}
.col_4 {width:300px; margin-left:0px;}
.col_3 {width:300px; margin-left:0px;}

 

/* Fix the .last issue */
.last {
margin-left:0;
margin-right:10px;
}

}

}

Source: DesignFestival