Como criar um Desing Main wrapper responsive no Blogger

criar design responsive main wrapper blogger template


Hoje vamos compartilhar como fazer isso responsive, mas para que isso serve, bem isso é importante para o layout do template do Blogger possa se adequar em qualquer tipo de dispositivo móvel uma vez que isso é importante para que seus leitores que acessam seu blog por smartphones possam visualizar melhor em sua tela para isso basta seguir os passos abaixo.


Você não precisa especificar uma largura do main-wrapper manualmente para cada largura do dispositivo basta fazer o seguinte 

.main-wrapper {width:600px;..............}

@media screen and (max-width:1024px){.main-wrapper{width:550px;........}
}
@media screen and (max-width:960px){.main-wrapper{width:500px;........}
}
@media screen and (max-width:800px){.main-wrapper{width:450px;........}
}
@media screen and (max-width:640px){.main-wrapper{width:400px;........}
}
@media screen and (max-width:414px){.main-wrapper{width:100%;........}
}


Em seguida vamos determinar  a largura do main-wrapper para divisão da sidebar podemos utilizar a função em CSS 

Vamos colocar um exemplo em uma sidebar com 300px  com margin-left  10px de espaçamento da barra lateral com a  main-wrapper

.sidebar-wrapper {
   width: 300px;
   margin-left: 10px;
   float:right;
}

Em seguida vamos criar um estilo para Main-wrapper da seguinte forma: 

.main-wrapper {
   width: calc(100% - 310px); /* 310px  de largura da barra lateral junto com a margem da esquerda  */
   float-left;
}


Para isso ficar mais flexivel em todos os dispositivos utilize 300px  de largura da barra lateral.


Click to comment