Duas colunas lado a lado(responsivo)

[Viper33 1]

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;

}

[GustavoDose 1]

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

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 1]

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 1]

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%;

}