Publicado em 28 de jan.

Duas colunas lado a lado(responsivo)

Pessoal,

Uma página do meu site está dividida em duas seções. No desktop funciona normalmente. O problema é quando a página é visualizada no smartphone, pois fica toda desconfigurada.

Aliás, para quem está desenvolvendo localmente e quer testar no celular, indico esse site: http://www.responsinator.com/

Meu código está como abaixo. Se eu alterar a width para auto, funciona perfeitamente no smartphone, porém desanda no desktop.

Como posso resolver?

Observação: a figura está dentro de biografia.

#biografia{
 width: 22%;
 float: left;
 margin: 0 auto;
 border: 1px dotted #999;
 background-color: #DDD;
 display: inline-block;
}

aside#lateral{

 display: inline-block;
 width: 70%;
 float: right;
 margin: 0 auto;
 box-shadow: 2px 2px 2px rgba(0,0,0,.5);
 background-color: #DDD;
 padding: 2.3%;
}

figure figcaption#autor{

 width: 100%;
 margin-top: 18%;
 font-size: 1.3em;
 border-top: 1px solid #CCC;
 border-bottom: 1px solid #CCC;
 padding: 5%;
}

p.autor{

 font-size: 1.1em;
 text-align: center;
 padding: 2.4%;
 margin: 0 auto;
}

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

GustavoDose· 28 de jan.

Cara vc tem que usar medias queries ai quando chegar em uma determinada resolução da tela ele aplica o width auto

como por exemplo

@media only screen and (min-device-width : 480px){
aside#lateral{

 width:auto !important;

 }

}

esse é o tamanho do iphone deitado.

é como eu uso para fazer meus sites responsivos

Denis.Santos· 28 de jan.

o GustavoDose está certo, use Media Queries, e para imagem ser responsiva, coloque dessa forma:

max-width: aqui você coloca em porcentagem o máximo da largura que quer que a imagem ocupe da DIV.

Viper33· 28 de jan.

O que eu não estou entendendo é porque o aside está ficando embaixo da div biografia no desktop. No smartphone fica ok. Antes do rodapé eu coloquei: <div style="clear:both;"></div>

Ou seja, elas não estão ficando lado a lado. O que está errado no código para isso acontecer?

@media only screen and (min-device-width : 480px){

#biografia{
 width:auto !important;
 float: left;
 margin: 0 auto;
 border: 1px dotted #999;
 background-color: #DDD;
 display: inline-block;
}
}

@media only screen and (min-device-width : 480px){
aside#lateral{

 display: inline-block;
 /*width: 70%;*/
 float: right;
 margin: 0 auto;
 box-shadow: 2px 2px 2px rgba(0,0,0,.5);
 background-color: #DDD;
 padding: 2.3%;
 width:auto !important;
}
}

Viper33· 31 de jan.

Gustavo Dose e Denis Santos, fiz como sugeriram com o código abaixo. Porém, ao redimensionar a tela do desktop, a foto vaza da div biografia. No início ela acompanha o redimensionamento, mas depois aumenta de tamanho. Vejam aqui como fica: http://malcolnfotografias.esy.es/o-autor.php.

Como posso resolver isso?

@media only screen and (min-device-width : 480px){

 #biografia{
 width: 25%;
 float: left;
 margin: 0 auto;
 border: 1px dotted #999;
 background-color: #DDD;
 display: block;
 height: 380px;
 }
}

@media only screen and (min-device-width : 480px){
aside#lateral{

 width:65% !important;
 display: inline-block;
 float: right;
 margin: 0 auto;
 box-shadow: 2px 2px 2px rgba(0,0,0,.5);
 background-color: #DDD;
 padding: 3%;
 }
}

figure#autor img{

 display: block;
 margin: 0 auto;
 max-width: 80%;
}

figure#autor figcaption{

 text-align: center;
 margin-top: 7%;
 border-top: 1px solid #606060;
 border-bottom: 1px solid #606060;

}

p.autor{

 font-size: 1.1em;
 padding: 2.1%;
 width: 90%;
 text-align: center;
 float: left;
 margin-top: 15%;
}