1

Não sei quase nada do, diagmos, "Avançado" do CSS!

Então eu queria saber como deixar uma div bem Responsiva para usuários MOBILE. O negócio é o seguinte:

Tenho Divs com algumas imagens, e uns radios, para escolha de detalhes etc! Essas divs estão de um tamanho só, que fica bem ajustada a tela do meu notebook! Mas eu quero fazer com que essas divs fiquem bem ajustadas com o panel da página em todos os dispositivos!

Meu código está assim:

.selecao-bordas {

left: 300px; 
top: 150px; 
width: 715px; 
height: 100px;
overflow: auto;

}

.selecao-details {

left: 300px; 
top: 150px; 
width: 715px; 
height: 200px;
overflow: auto;

}
<form>
    <br>
    Bordas
    <div class="selecao-bordas">
        <?php include("bordas.php"); ?>
    </div>
						
    <br>
    Detalhes
				
    <div class="selecao-details">
        <?php include("detalhes.php"); ?>
    </div>
								
    <br>
    Nível do Clã
				
    <?php include("clanlevel.php"); ?>
				
</form>

Um print de como fica na página:

http://image.prntscr.com/image/74d4235e915a43e3af1a987e70da9e62.png

Assim ele fica quando a tela diminui:

http://image.prntscr.com/image/92a0c3d6dedd4b928f3c5011b938722f.png

6
  • 1
    Ja pensou em usar bootstrap e o sistema de grid dele?
    – Giovane
    28/10/2016 às 21:25
  • Uso Bootstrap, isso nem passou pela minha cabeça cara o, vou tentar aqui! 28/10/2016 às 21:29
  • Como eu posso testar um site em vários tamanhos? 28/10/2016 às 21:30
  • Mas tipo, como vou fazer pra deixar as colunas com a scroll-bar? sempre se ajustando? 28/10/2016 às 21:34
  • 2
    No chrome, no console de desenvolvedor(clique com botão direito, inspecionar elemento), haverá dois icones na aba superior do lado esquerdo. O primeiro é uma seta em um quadrado o outro é a imagem de um celular e um tablet. Clique na imagem do celular e tablet. Ai vc ja esta no modo responsivo do chrome, vai ver que da pra aumentar e diminuir o tamanho da tela sem alterar o tamanho do browser inteiro. Além de selecionar um tamanho especifico de tela como de um iphone 6, de uma olhada nesse link developers.google.com/web/tools/chrome-devtools/device-mode/…
    – Giovane
    28/10/2016 às 21:36

1 Resposta 1

1

Acho que isso ja resolve.

.selecao-bordas, .selecao-details {
    overflow: auto;
}
.content {
    display: inline-block;
}


<div class="container">
    <form>
        <br>
        Bordas
        <div class="selecao-bordas col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="content">
                <?php include("bordas.php"); ?>
            </div>
        </div>

        <br>
        Detalhes

        <div class="selecao-details col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="content">
                <?php include("detalhes.php"); ?>
            </div>
        </div>

        <br>
        Nível do Clã

        <?php include("clanlevel.php"); ?>

    </form>
</div>
10
  • cara, nao mudou nada, a selecao details ta ate perfeitinha, mas quero diminuir ela, para fazer que nem na print, a scroll-bar e a selecao bordas esta ultrapassando o panel 28/10/2016 às 22:04
  • Tente colocar position: relative tanto nas selecoes quanto nos content. Ajudar sem ver ainda é difícil pra mim haha
    – Giovane
    28/10/2016 às 22:06
  • prntscr.com/d0914f 28/10/2016 às 22:11
  • No mobile fica assim: prntscr.com/d0927l 28/10/2016 às 22:14
  • 1
    Daqui a umas horas eu vejo. Tô saindo do trampo
    – Giovane
    28/10/2016 às 22:16

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 .