1

Desculpe a pergunte, é meio boba mas preciso de ajuda. Estou utilizando o Bootstrap para facilitar na hora dos grids... Preciso de duas divs na página, uma com col-md-9 e outra com col... e pra separá-las, estou usando margin na menor que está à direita, porém, quando redimensionada pra telas menores (com uma media query max-width: 768px) a margin ainda continua lá, mesmo que eu coloque ela como "0" dentro da media query... O que fazer?

inserir a descrição da imagem aquirediomensionada

/*Div pai*/
.corpo_anunciar{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
}

/*DIV ROSA */
.corpo_anuncios{
  background-color: #D42574;
  margin-left: 30px;
}

/*DIV AZUL*/
.filtros{
  background-color: #0070FF;
  margin-left: 15px;
}

@media only screen and (max-width: 768px){

  .corpo_anunciar{
     margin: 0;
     padding: 0;
     width: 100%;
   }

  .corpo_anuncios{
     margin: 0px;
     width: 100%;
   }

  .filtros{
     margin: 0;
     width: 100%;
   }
}
3
  • Como vc fez a media query? Coloque-a tb no código, pq qualquer errinho pode não funcionar.
    – Sam
    15/04/2019 às 18:12
  • editei já mano, valeu pelo toque... 15/04/2019 às 19:05
  • coloque seu html também
    – Mateus
    15/04/2019 às 19:06

1 Resposta 1

1

Amigo acho que vc está meio que se equivocando com alguns conceitos do Grid do Bootstrap. Primeiro, o Grid só se comporta direito se ele seguir uma hierarquia .container > .row > .col sendo que o .row já é flex, então vc não precisa fazer CSSs de flex na mão para ela. Assim como vc não precisa de classes para margin e @media que também já existem por padrão no BS.

Veja, vc vai ter um col-md-9, onde o md significa @media 768px, então o mesmo vc aplica para o margin, tipo ml-md-5 que significa margin-left: 3rem até o media querie de 768px

Essa imagem representa o que foi explicado acima. A distancia entre a coluna rosa e a azul é 3rem, que corresponde ao ml-5, mas se vc quiser um valor automático por exemplo vc pode usar ml-md-auto. Ou se quiser um valor fixo em pixel ai sim vc vai ter que fazer um @media screen (min-width: 769px) e colocar sua margem customizada. Repare que é min-width, ou seja apenas de 769px para cima aplica a margem, abaixo disso vc deixa o ml-0

inserir a descrição da imagem aqui

Segue o código da imagem

/*DIV ROSA */
.corpo_anuncios{
  background-color: #D42574;
}

/*DIV AZUL*/
.filtros{
  background-color: #0070FF;
}
  
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
  <div class="row">
    <div class="col-md-9">
      <div class="corpo_anuncios">1</div>
    </div>
    <div class="col ml-0 ml-md-5">
        <div class="filtros">2</div>
    </div>
  </div>
</div>

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 .