.
.
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.
