Really confused about media queries

HTML-CSS
1

I’m confused about media queries.
How do I see if it has worked or not?
I added this to my CSS (for portfolio website page):

@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: .5em;}
}

But it doesn’t seem to change anything when I make my browser window small.

Also what is the difference between writing

@media screen

and just

@media

?

Thanks

2

Try doing something obvious like changing the background color. screen is a media type

1 Like
3

Hey, you likely meant to write “max-width”. I guess then it works how you intended: https://jsfiddle.net/x59fdkoh/2/ (You can test it by changing the window width)

The “screen” is to explicitly state that these styles are meant screen, as maybe opposed to “print”. It doesn’t have an immediate effect as opposed to @media alone. You can read more details and about other keywords (like “speech”) here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

1 Like
4

Many thanks it worked! :slight_smile:

5