Div responsivas

[Alvaro Pacífico Serpa 0]

Olá, estou tendo um problema na responsividade do projeto, até um certo ponto que diminui a tela fica tudo ok mas depois acaba indo para o lugar errado.

Depois quando diminuo a tela a div responsiva acaba indo para baixo da outra, porem quero que ela fique ali no espaço onde ela caiba

[luannsr12 17]

manda seu código pra gente da uma olhada ai

[th4deu 4]

Olá Alvaro, 

 

Neste caso, o ideal é você manter a proporção da div responsiva. Porém, os "px" correspondentes ao % da largura da div altera de acordo com a largura da div "container" (se for fixo, ajuda bastante, caso contrário, ele adota o tamanho da tela do navegador).

 

Ex.:

Para uma resolução 1600x1200, 80% de largura corresponde a 1280px e, os 200px (da div fixa) correspondem a 12,5% da tela;

Para uma resolução menor, 1280x1024, por exemplo, 80% corresponderá a 1024px e os 200px corresponderão a 15% da tela.

Ou seja, a div "fixa" mantem 200px de largura para ambos os casos, por isso empurra a outra para baixo.

 

O ideal nesse caso é fazer ajustes/exceções conforme o tamanho da tela, diminuindo o % da div responsiva conforme a largura da tela. Por exemplo:

 

#div-responsiva{ width: 80% }
/* diminui a largura da div de acordo com a largura máxima da div container, 
   que por sua vez, diminuirá quando redimensionar a janela do navegador */
@media screen and (max-width: 480px) { 
    #div-responsiva { width:70% }
}

Diz aí se funcionou.

 

Aqui tem um exemplo: https://jsfiddle.net/th4d/9uya69re/3/ (redimensiona a janela para ver)

 

Abs.,