0

Não tenho muito conhecimento em html ou css.

Quando minimizo a tela ou mudo a resolução, o container não segue o mesmo padrão. Da seguinte forma:

Maximizado: inserir a descrição da imagem aqui

Minimizado:

inserir a descrição da imagem aqui

Por que isso ocorre e qual a melhor forma de corrigir? Desde já agradeço a atenção.

segue como está no css:

#containerForm{
  float: right;     
  width: 1050px;  
  background: tomato;
}

Coloquei esse fundo vermelho só para melhorar a visualização

Trecho html:

    <div id="containerForm">     
        <form action="." method="POST">            
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit">Simular</button>
        </form>
    </div>
4
  • Quando faço isso o container não fica mais alinhado, ele joga tudo para o canto direito da tela 8/08/2020 às 20:12
  • Sim, utilizei o float porque foi o unico jeito que achei para deixar alinhado. Qual outro jeito poderia colocar? Não sei muito sobre html ou css 8/08/2020 às 20:15
  • 2
    Esse problema está acontecendo por conta da largura absoluta, o correto é você colocar o menu lateral e essa div com larguras relativas (%). E caso eles fiquem um abaixo do outro, corrigir com float:left; e display:inline-block;.
    – yohlu
    8/08/2020 às 20:18
  • Obrigado! Coloquei width: 82% e caso minimize ou mude a resolução da tela o container permanece igual 8/08/2020 às 20:27

1 Resposta 1

1

Minha opinião

O problema

você esta usando medidas fixas , então sempre que a tela mudar ele ainda vai ocupar a posição que foi etabelecida

Como resolver?

Meu conselho é usar flex-box mais medidas relativas(%) Vai alterando o valor percentual do width até

Codigo

CSS

#containerForm{
  float: right;     
  width: 60%;  
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background: tomato;
}

Se não resolver seu problema sinta-se avontade de compartilhar sua versão estática do código no https://jsfiddle.net/ assim posso ajudar em tempo real.

4

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .