I am facing problems editing margin in media query

Question

Sorry to ask, it’s kind of silly but I need help. I’m using Bootstrap to make it easier when it comes to grids... I need two Ivs on the page, one with col-Md-9 and another with col... and to separate them, I am using margin in the smallest that is on the right, however, when resized to smaller screens (with a max-width media query: 768px) the margin is still there, even if I put it as "0" inside the media query... What to do?

/*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%;
   }
}

Answer 1

Friend I think you’re kind of mistaken with some concepts of the Bootstrap Grid. First, Grid only behaves right if it follows a hierarchy .container > .row > .col where . Row is already flex, so you don’t need to do flex Csss on hand for it. Just like you don’t need classes for margin and @media which also already exist by default on BS.

Look, you’re gonna get one col-md-9, where the Md means @media 768px, then the same you apply to the margin, guy ml-md-5 which means margin-left: 3rem up to the media querie of 768px

This image represents what was explained above. The distance between the pink and blue column is 3rem, which corresponds to the ml-5, but if you want an automatic value for example you can use ml-md-auto. Or if you want a fixed value in pixel ai yes you will have to make a @media screen (min-width: 769px) and place your custom margin. Note that it is min-width, or merely of 769px up applies the margin, below that you leave the ml-0

Follow the image code

/*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>