媒体查询与显示选项一起使用

Question

I have attached this media query with my css class.

CSS

  @media all and (max-width: 600px) {
    .details{
       display:block;
    }
}

.details{

  margin-left: 20px;
   font-size: 15px; 
    color: black;
}

HTML

 <p class="details" > My career has taken a natural progression fro m client websites, to UI templates, to simple php websites, to Laravel framework. </p>

My problem is that in the media query class, whatever I write instead of display nothing works. I am trying to give a different color color:blue and but the color remains same.

what is the issue?

Answer 1

Just change the order:

.details{

  margin-left: 20px;
   font-size: 15px; 
    color: black;
} 
@media all and (max-width: 600px) {
    .details{
       display:block;
      color: blue;
    }
}

Answer 2

move media query to bottom of details class.

when you set a property for a class or id more than once, the last one affects the class or id.