Jump to content

Recommended Posts

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.59b164a6bcfd9_Sem-Ttulo-1.png.9fda93477cbd732835531d7c74c0b2fe.png

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

59b166c292c7e_Sem-Ttulo-1.jpg.56a112790e44a211dd9401c9e0bcb6fb.jpg59b166c2e34c6_Sem-Ttulo-2.jpg.ba7979afb2c8911c3c7594ff77670371.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.