I've been trying to make this @media code work for 30 minutes already but I still can't find an answer

Question

div.klase {
  background-color: aqua;
  height: 200px;
  width: 300px;
  border: 1px solid red;
  box-sizing: border-box;
}

@media screen and (max-width:500px;
) {
  .klase {
    background-color: pink;
  }
}

<div class="klase"></div>

First of all sorry if this question might be dumb , I'm trying to change its .klase color to pink when it is smaller than 500px . But it doesn't seem to work that way even though it's almost similiar to the other examples of media queries. Appreciate any help, thanks in advance.

`div.klase` is more specific than `.klase` so your media block will not work. You also need to remove the `;` after `500px` — Turnip, Jun 21 '18 at 11:18
Going off of @Turnip 's comment, specifying an element before a class like "div.klase" isn't necessary for most situations. — Matthew Beaudin, Jun 21 '18 at 13:04

score 2 · Answer 1 · edited Jun 21 '18 at 11:19

2

It works with specificity. Try this way

div.klase {
  background-color: aqua;
  height: 200px;
  width: 300px;
  border: 1px solid red;
  box-sizing: border-box;
}

@media screen and (max-width:500px) {
  div.klase {
    background-color: pink;
  }
}

edited Jun 21 '18 at 11:19

m4n0

29,823
27
76
89

answered Jun 21 '18 at 11:17

Ajay.k

111
10

score 2 · Answer 2 · answered Jun 21 '18 at 11:20

2

Check this

.klase {
  height: 200px;
  width: 300px;
  border: 1px solid red;
  box-sizing: border-box;
  background-color:aqua;
}

@media (max-width: 500px) {
  .klase {
    background-color:pink;
  }
}

<div class="klase"></div>

answered Jun 21 '18 at 11:20

Abin Thaha

4,493
3
13
41

I've been trying to make this @media code work for 30 minutes already but I still can't find an answer

2 Answers2