2

Tenho o site responsivo, e tenho uma lista de produtos. No desktop fica OK, fica por exemplo:

|PRODUTO 1|   |PRODUTO 2|   |PRODUTO 3|

|PRODUTO 4|   |PRODUTO 5|   |PRODUTO 6|

|PRODUTO 6|   |PRODUTO 7|   |PRODUTO 8|

No celular, fica um em cima do outro, por conta do tamanho da tela:

|PRODUTO 1|

|PRODUTO 2|

|PRODUTO 3|

|PRODUTO 4| 

|PRODUTO 5|

Queria que no celular se organizasse de 2 em 2:

|PRODUTO 1|   |PRODUTO 2|

|PRODUTO 3|   |PRODUTO 4|

|PRODUTO 5|   |PRODUTO 6|

Como organizo isso com css? É possível?


Editando, eu consegui com o seguinte CSS:

-webkit-flex: 1 1 50%;
flex: 1 1 50%;
min-width: 1px;
2
  • 2
    Está usando algum framework CSS baseado em colunas? Tipo, Bootstrap e tal
    – Jéf Bueno
    Commented 22/05/2017 às 18:43
  • Não, @jbueno, sem nenhum framework. Commented 22/05/2017 às 18:54

2 Respostas 2

2

utilize media query

.box{
    width: 25%;
    height: 150px;
    background: black;
    float: left;
}


@media(max-width: 600px){
    .box{
        width: 50%;
    }
}
<div class="boxs">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

https://jsbin.com/gezokoh/edit?html,css,output

2

O ideal seria saber de que forma você montou o seu CSS, mas para ele se tornar uma coluna, eu imagino que você deva estar utilizando float: left.

A partir disso, o ideal seria você colocar cada uma das suas divs com metade da largura da tela e seria algo assim. (Logicamente isto dentro de Media Queries específicas para o tamanho da tela desejada):

body {
  margin: 0;
}

.product {
  float: left;
  width: 46%;
  height: 50px;
  margin: 1%;
  line-height: 50px;
  text-align: center;
}

.product:nth-child(1) {
  background: #111;
  color: #AAA;
}

.product:nth-child(2) {
  background: #222;
  color: #999;
}

.product:nth-child(3) {
  background: #333;
  color: #888;
}

.product:nth-child(4) {
  background: #444;
  color: #777;
}

.product:nth-child(5) {
  background: #555;
  color: #666;
}

.product:nth-child(6) {
  background: #666;
  color: #555;
}

.product:nth-child(7) {
  background: #777;
  color: #444;
}

.product:nth-child(8) {
  background: #888;
  color: #333;
}

.product:nth-child(9) {
  background: #999;
  color: #222;
}

.product:nth-child(10) {
  background: #AAA;
  color: #111;
}
<div id="container">
  <div class="product">Produto 1</div>
  <div class="product">Produto 2</div>
  <div class="product">Produto 3</div>
  <div class="product">Produto 4</div>
  <div class="product">Produto 5</div>
  <div class="product">Produto 6</div>
  <div class="product">Produto 7</div>
  <div class="product">Produto 8</div>
  <div class="product">Produto 9</div>
  <div class="product">Produto 10</div>
</div>

EDIT

Se não conhece Media Queries, seria a forma de, no CSS, você definir para que telas você gostaria que suas regras se aplicassem colocando suas regras desta forma (Exemplo):

@media screen and (max-width: 480px) {
    /* suas regras aqui */
}

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 .