why i have to write my media query at the end of my css.Is there any sequence to write media query from larger to smaller screen size?

Question

I am very confuse with the media query because when ever i apply media query it does not work properly is there ant sequence to write it in CSS file?

@media max-width(767px)  {body{background:red;}  }
@media max-width(992px)  {body{background:blue;}  }
@media max-width(1200px)  {body{background:#fff;}  }

Is there any proper sequence to write it according to the screen size?Is the any difference if i write it like this?

@media max-width(1200px)  {body{background:#fff;}  }
@media max-width(992px)  {body{background:blue;}  }
@media max-width(767px)  {body{background:red;}  }

can you explain your media do not work at all or because the order ? — לבני מלכה, Jul 26 '18 at 05:10
yes if i write my media at the beginning of my page it does not working should i use my media query at the end of my css ? — Sumit Kumar, Jul 26 '18 at 05:12
Possible duplicate of [Why does the order of media queries matter in CSS?](https://stackoverflow.com/questions/8790321/why-does-the-order-of-media-queries-matter-in-css) — Kamalesh M. Talaviya, Jul 26 '18 at 05:25

לבני מלכה · Accepted Answer · 2018-07-26T05:22:20.547

3

You have to write your media as below.

Learn here:https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

See here:https://jsfiddle.net/r60xs5j7/3/

@media only screen and (max-width: 767px) {body{background:#fff;}  }
@media only screen and (max-width: 992px)  {body{background:blue;}  }
@media only screen and (min-width: 1200px)  {body{background:red;}  }

and whenever you put them in css they have to work(Except for a case of override that you will need use !important)

See here(end of css):https://jsfiddle.net/r60xs5j7/5/

Note!

You need this meta in head tag to make media query works:

<meta name="viewport" content="width=device-width, initial-scale=1">

edited Jul 26 '18 at 05:22

answered Jul 26 '18 at 05:16

לבני מלכה

15,925
2
23
47

1

tell me for more help – לבני מלכה Jul 26 '18 at 05:22
yeah no issues but can you please tell me that do you use media with max and min width ? – Sumit Kumar Jul 26 '18 at 05:31
what is the right way to right it using max and min with or just only the width? – Sumit Kumar Jul 26 '18 at 05:32
it for your decision.... you can lean better and deeper here:https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – לבני מלכה Jul 26 '18 at 05:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176761/discussion-between-sumit-kumar-and--). – Sumit Kumar Jul 26 '18 at 05:35

why i have to write my media query at the end of my css.Is there any sequence to write media query from larger to smaller screen size?

1 Answers1