blogger Awesome template Responsive RWD 修改

怎麼把 blogger Awesome template 改成 Responsive 變成 RWD
1.

    <meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=1100&quot;' name='viewport'/>

->
    <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>



2.
Remove
      <b:variable default='960px' name='content.width' type='length'/>
      <b:variable default='0' name='main.column.left.width' type='length'/>
      <b:variable default='310px' name='main.column.right.width' type='length'/>

3.
放在 ]]></b:skin> 上方

.separator a{margin-left:0px!important;margin-right:0px!important;}
.post img{max-width:100%;height:auto;}

4.取代
body {
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}

取代成
body {
width: 1100px;
margin:0 auto;
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: 30%;
float: right;
margin-right: -$(main.column.right.width);
}
.main-inner .column-center-outer{
float: left;
width:65%;
}

5. Awesome template

/*Responsive*/
      @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
        .content-inner{overflow: hidden;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-right-outer, .main-inner .column-center-outer{float:none;width:100%!important;}
        .main-inner .column-right-inner, .main-inner .column-center-inner{padding:0}
        .main-inner .section {margin:0 15px}
        .Header h1{font-size:30px;text-align:center;}
        .Header .description{font-size:14px;text-align:center;}
      }