make blogger template responsive with right sidebar | work

code to make blogger template responsive :

1. Find code like below, it's located above the   < head >   tag

<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'/>

Remove and replace it with the code below.

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

2. Remove the code below or something similar located above the     < b:template-skin>  

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

3. Find the code as below located above    <b:template-skin>)   

body {
min-width: $(content.width);
}

Change or replace the code as per given below :

body {

    width: 100%;
    margin:0 auto !important;
    min-width: $(content.width);
    height: 0;
    padding: 0;
    margin: 0;

}

then search the  the following code in the same segment ,

    .main-inner .column-right-outer {
        width: $(main.column.right.width);
        margin-right: -$(main.column.right.width);
      }

Change  or replace it with the code given below:

 .main-inner .column-right-outer {

 width: 30%;
 float: right;
 margin-right: -$(main.column.right.width);

}
 
    .main-inner .column-center-outer{
    float: left;
    width:65%;
    }

4. Copy the css code below and paste it just above the code      ]]></b:skin>   

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

5  Now the next and final process is a little be different for different bloggers template, so know your template and use the prospective code given here for all different bloggers template.....

For users Simple Templates and Travel Template, 

copy and paste the below given code just above the      ]]></b:skin>   

     /*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-center-outer, .main-inner .column-right-outer{float:none;width:100%!important;}
            .footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;}
            .Header h1{font-size:30px;text-align:center;}
            .Header .description{font-size:14px;text-align:center;}
          }
          @media screen and (max-width:414px){
            .footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section {margin:10px;}
          }
          @media screen and (max-width:320px){
            .fauxcolumn-right-outer .fauxcolumn-inner{border-left:none;}
            .fauxcolumn-left-outer .fauxcolumn-inner{border-right:none;}
            .footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section{margin:0;}
          }

For users Awesome Inc Template, 

copy and paste the below given code just above the      ]]></b:skin>   

/*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;}
      }

For users Window Template,

copy and paste the below given code just above the      ]]></b:skin>   

/*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-center-inner, .main-inner .column-right-inner {padding:0}
        .Header h1{font-size:30px;text-align:center;}
        .Header .description{font-size:14px;text-align:center;}
      }

      @media screen and (max-width:320px){
        .main-inner .section{margin:0 10px}
        .post-outer {padding:10px 10px;}
      }

For users Awesome Inc Template, 

copy and paste the below given code just above the      ]]></b:skin>  

/*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-center-inner{padding:0}
.main-inner .column-right-inner{padding:20px}
        .Header h1{font-size:30px;text-align:center;}
        .Header .description{font-size:14px;text-align:center;}
      }
      @media screen and (max-width:320px){
        .main-inner .section{margin:0 10px}
        .post-outer {padding:10px 10px;}
      }

the work is done ,  save template

source