Série Como tornar responsivo um template nativo do Blogger- tutorial 1

Views:
CÓDIGO VIEWPORT

Localize:

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


E substitua por:

<meta content='width=device-width' name='viewport'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<meta content='IE=edge' https-equiv='X-UA-Compatible'/>


CÓDIGO CONTENT INNER
.content-inner {
width: 100%;
max-width: 1300px;
margin: 0 auto
}

CÓDIGO DE AJUSTE DO LOGO

#Header1_headerimg {
width: 100%;
max-width: 581px;
height: auto;
margin: 1em auto;
margin-bottom: 3em;
}

CÓDIGO LAYOUT GERAL


/* LAYOUT GERAL
----------------------------------------------- */
.main-inner {
margin-top:1.0em;
}
.main-inner .column-center-inner {
padding: 10px 0;
}
.main-inner .column-center-inner .section {
margin: 0 22px;
}
/* COLUNA LATERAL DIREITA*/
.main-inner .column-right-outer {
width: 30%;
}
.main-inner .column-right-inner {
margin-left: 0.1em;
margin-right: -0.1em;
margin-top: 0.5em;
background: $(widget.outer.background.color);
}
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-left: 30px;
}
/* ÁREA DOS POSTS NO LAYOUT*/
.main-inner .column-center-outer {
width: 70%;
background: transparent none repeat scroll top left;
}
/* COLUNA LATERAL ESQUERDA*/
.main-inner .column-left-inner {
margin-right: 10px;
}
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
margin-right: 10px;
background: #ffffff none repeat scroll top left;
}
.main-inner .column-left-inner,
.main-inner .column-right-inner {
padding: 0.9375em 0;
}
/* FORMATAÇÃO FOOTER E SIDEBAR*/
.footer-inner .widget, .sidebar .widget {
margin: 1.5em 0em;
}


CÓDIGO DE AJUSTES

/* RESPONSIVOS by Elaine Gaspareto */
img, embed, iframe, object, video, #player {
max-width: 100%;
border:0;
}
/* CORREÇÃO DE ERROS
----------------------------------------------- */
* {
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


CÓDIGO MEDIA QUERIES

<style type='text/css'>
/* MEDIA QUERIES- DEFINE A RESPONSIVIDADE
----------------------------------------------- */
@media screen and (max-width : 1152px) {
.sidebar .widget h2 {width:108%;}
#related-posts{float:left;width:auto;margin-left: 4px;}
#related-posts .related_img {margin:5px !important;object-fit: cover;width:225px !important;height:195px !important;}
#related-title {color:#222;text-align:center;text-transform:none;padding: 0px 5px 15px;font-size:14px;width:225px !important; height: auto;}
}
@media screen and (max-width : 1024px) {
.sidebar .widget h2 {width:109%;}
#related-posts{float:left;width:auto;margin-left: 4px;}
#related-posts .related_img {margin:5px !important;object-fit: cover;width:195px !important;height:170px !important;}
#related-title {color:#222;text-align:center;text-transform:none;padding: 0px 5px 15px;font-size:13px;width:195px !important; height: auto;}
.post-body img {float:center;margin:0 10px 0px -14px;padding:3px;background:none;width:100%;height:auto;}
}

@media screen and (max-width : 900px) {
.sidebar .widget {margin-left:-7px;margin-right: -5px;}
.sidebar .widget h2 {width:103.5%;}
.main-inner .column-center-outer {width:100%;}
.main-inner .column-center-inner {padding: 0 1em;}
.main-inner .column-right-outer{width:100%;}
#related-posts{float:left;width:auto;margin-left: 4px;}
#related-posts .related_img {margin:5px !important;object-fit: cover;width:210px !important;height:180px !important;}
#related-title {color:#222;text-align:center;text-transform:none;padding: 0px 5px 15px;font-size:13px;width:210px !important; height: auto;}
}
@media screen and (max-width : 768px) {
#related-posts{float:left;width:auto;margin-left: 4px;}
#related-posts .related_img {margin:5px !important;object-fit: cover;width:200px !important;height:170px !important;}
#related-title {color:#222;text-align:center;text-transform:none;padding: 0px 5px 15px;font-size:13px;width:135px !important; height: auto;}
.main-inner .column-center-outer {padding: 0em;}
#menu {margin-left: 0em;margin-right: 0em;}
}
@media screen and (max-width : 736px) {
.sidebar .widget h2 {width:104.5%;}
.main-inner .column-center-inner {padding: 0 0.1em;width: 102%; margin-right: 25px;margin-left: -3px;}
.main-inner .column-right-inner {padding: 0 0;}
#related-posts{float:left;width:auto;margin-left: 4px;}
#related-posts .related_img {margin:5px !important;object-fit: cover;width:170px !important;height:140px !important;}
#related-title {font-size:12px;width:170px !important; height: auto;}
}
@media screen and (max-width : 600px) {
#related-posts .related_img {margin:5px !important;object-fit: cover;width:155px !important;height:140px !important;}
#related-title {font-size:10px;width:155px !important; height: auto;}
}
@media screen and (max-width : 480px) {
#related-posts{float:left;width:auto;margin-left: 1px;}
#related-posts .related_img {margin:5px !important;object-fit: cover;width:110px !important;height:90px !important;}
#related-title {display: none;}
}
@media screen and (max-width : 414px) {
.sidebar .widget h2 {width:108%;}
#related-posts{float:left;width:auto;margin-left: -2px;}
#related-posts .related_img {margin:5px !important;object-fit: cover;width:90px !important;height:80px !important;}
}
@media screen and (max-width : 375px) {
.sidebar .widget h2 {width:109%;}
#related-posts{float:left;width:auto;margin-left: -2px;}
#related-posts .related_img {margin:5px !important;object-fit: cover;width:80px !important;height:80px !important;}
}
@media screen and (max-width : 360px) {
.sidebar .widget h2 {width:109%;}
#related-posts{float:left;width:auto;margin-left: 4px;}
#related-posts .related_img {margin:5px !important;object-fit: cover;width:75px !important;height:60px !important;}
}
@media screen and (max-width : 320px) {
.sidebar .widget h2 {width:110%;}
#related-posts{float:left;width:auto;margin-left: 4px;}
#related-posts .related_img {margin:5px !important;object-fit: cover;width:60px !important;height:60px !important;}
}
  </style>
   




Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage