media query css responsive

Question

I have this p:

<p class="p">This is for tests</p>

.p {
  font-size: 50px;
  background-color: blue;
}

When i the screen is 320px width change to :

@media only screen and (max-width: 320px) {
  .p {
    background-color: red;
    font-size: 30px;
  }
}

and when is 375px:

    @media only screen and (max-width: 375px) {
  .p {
    background-color: green;
    font-size: 20px;
  }
}

Why the 375px query set background-color to 320px, when the screen is 320px i want to remain red, and when is 375 px i want to be green. (New in media responsive!)

Place the `max-width: 375px` query above the `max-width: 320px` in your CSS file — Will, Aug 20 '20 at 14:09

DCR · Accepted Answer · 2020-08-20T14:15:09.023

1

just reorder your media queries. Otherwise the max-width:375px over rides max-width:320px

.p {
  font-size: 50px;
  background-color: blue;
}

  @media only screen and (max-width: 375px) {
  .p {
    background-color: green;
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  .p {
    background-color: red;
    font-size: 30px;
  }
}

<p class="p">This is for tests</p>

edited Aug 20 '20 at 14:15

answered Aug 20 '20 at 14:13

DCR

14,737
12
52
115

Explanation why.... – epascarello Aug 20 '20 at 14:15
@epascarello: Because CSS works in a Top to Bottom order. So, whatever the last value it gets, it will reflect only that to the tag. In this case, the media query for the screen size 375 is overwriting the value gained from 320. So, re-order is required. The second approach is to give a range of media query `@media only screen and (min-width: 321px) and (max-width: 375px)` that will also work. – Sunny Vaghadia Aug 20 '20 at 15:47
isn't that what cascading means? :) – DCR Aug 20 '20 at 18:50

Alpfreda · Answer 2 · 2020-10-15T08:24:57.697

1

There is nothing wrong, just change the orders.

.p {
  font-size: 50px;
  background-color: blue;
}

@media only screen and (max-width: 375px) {
  .p {
    background-color: green;
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  .p {
    background-color: red;
    font-size: 30px;
  }
}

<p class="p">This is for tests</p>

edited Oct 15 '20 at 08:24

answered Aug 20 '20 at 14:58

Alpfreda

387
1
6

score 0 · Answer 3 · answered Aug 20 '20 at 15:08

We need to reorder the media queries, because if you write two rules “max-width: 320px” and “max-width: 375px” for one screen size which satisfy both the rules, it will choose the last css rule that was declared. You can use !important to the first rule which can solve your problem without reordering, but this not a correct approach of doing it.

As per your example, if the browser window is 320px pixels wide, the background-color will be green, because 320px condition satisfies both media queries, so it will select the last rule

//First rule
@media only screen and (max-width: 320px) {
  .p {
    background-color: red;
    font-size: 30px;
  }
}

//Last rule
 @media only screen and (max-width: 375px) {
  .p {
    background-color: green;
    font-size: 20px;
  }
}

When you reorder, the background color will be green, when the screen size is 320px, because we have added the 320px media query at last.

//First rule
 @media only screen and (max-width: 375px) {
  .p {
    background-color: green;
    font-size: 20px;
  }
}

//Last rule
@media only screen and (max-width: 320px) {
  .p {
    background-color: red;
    font-size: 30px;
  }
}

I hope this solves your query.

score 0 · Answer 4 · answered Aug 20 '20 at 15:14

Just change the orders.

.p {
  font-size: 50px;
  background-color: blue;
}

@media only screen and (max-width: 375px) {
  .p {
    background-color: green;
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  .p {
    background-color: red;
    font-size: 30px;
  }
}

media query css responsive

4 Answers4