0

I have a problem with understanding how @media only screen works. I have three screen sizes:

1) @media only screen and (max-width: 640px)
2) @media only screen and (min-width: 640px) and (max-width: 1250px)
3) @media only screen and (min-width: 1250px)

I want to make that one element would be shown only on large screen size (3), so I wrote: display: none on 1) and 2) screens and display: block on 3) screen.

I also have three style files for each screen size which are put into the main file like this:

@import "large-screen";
@import "medium-screen";
@import "small-screen";

And the small-screen size file overwrites the others:

inspect

I don't understand how it can overwrite if it's set to @media only screen and (max-width: 640px), doesn't max-width 640px mean that this code will work when screen is smaller than 640px? Can someone explain me how this work and how I should write that my element would be displayed only on large screen. Thank you!

Mhd Alaa Alhaj
  • 2,438
  • 1
  • 11
  • 18
Dovtutis
  • 115
  • 1
  • 1
  • 7
  • Try reversing the order of your @import statements. – Ffion Jan 31 '21 at 11:36
  • And check out this answer about the order of media queries and the 'cascading' nature of cascading style sheets: https://stackoverflow.com/questions/8790321/why-does-the-order-of-media-queries-matter-in-css – Ffion Jan 31 '21 at 11:38
  • Then the element is shown on all screen sizes, it overwrites all other screen sizes, and display none: for 1) 2) screens does not work. – Dovtutis Jan 31 '21 at 11:38
  • 1
    Your original code works for me (see codepen here: https://codepen.io/newstaircase/pen/poNvRJL) so the problem might be elsewhere, e.g. HTML not matching up with CSS, other CSS overriding what you've done. Please could you show more code? – Ffion Jan 31 '21 at 11:47
  • Does this answer your question? [Media Query not working](https://stackoverflow.com/questions/41989147/media-query-not-working) – armin yahya Jan 31 '21 at 17:02

0 Answers0