In this tutorial is showing how to change template of website with mobile version using css. The first step, to get the resolution of the media used is using the viewport.
Use css code below to determine the width of the template, according to the media width. If using media with a maximum resolution of 983px the width of the template used is 754px, for mobile media with a maximum resolution of 479px, then the template using the width of 300px.
/* ... default css codes. Use this css with two or more columns.
Use this codes bellow to set template width */
@media only screen and (min-width:768px) and max-width:983px){
#outer-wrapper{width:754px}
}
@media only screen and (max-width:767px){
#outer-wrapper{width:420px}
}
@media only screen and (max-width:479px){
#outer-wrapper{width:300px}
}
