There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like () to up-vote the contribution!
How do you know which media query is applied if there are multiple?
In the example, the second media query (min-width: 480px) overrides the first (min-width: 320px). Is it just the further down a rule is in the css stylesheet, the higher priority?
Hi, not sure if you still need a response on this? I had the same question but (I think!) I worked it out during the process of trying to put it down in words :0) I think that it works like this:
Width below 320px - no media query CSS rules executed
Width meets or exceeds 320px - CSS rules stated in the 320px media query executed (e.g. set smaller font-size - which would drive any em or rem relative values that may have also been set up)
Width meets or exceeds 480px - CSS rules stated in the 480px media query executed which would either override (for example move font-size back up to level that would be more appropriate to a wider screen) and/or introduce additional rules.
What other alternatives can be substituted with keyword “screen”, the exercises mentioned print and a couple others, but are there more alternatives to make a website better?
Hi beta, I am thinking the same thing. why would it change from (min-width: 320px) and (max-width: 480px) to (min-width: 320px) and (min-width: 480px)?
Did you ever get an answer to this? I read the answer from microace but I did not undertand it.
Thanks,
Gilbert
Well yeah, but that’s not the same thing as the first media query.
@media only screen and (min-width: 320px) and (max-width: 480px) {
}
The media query above will apply the CSS rules between its opening and closing braces only if the screen our web page is being viewed on has a width that is between 320px - 480px
There is no mistake. Second example is right.
We can use another variant too, but! If we use separate query min-width : 320px and separate query max-width : 480px, we override first media query up to 480px AND doesn’t override rules from first query for screens with with more then 480px!!! Hence the first query works for screens from 480px.
If we use min-width : 320px and separate query min-width : 480px. We add “upper bound” for the first query and override anything more than 480px width. Hence the first query works for screens with width from 320px to 480px.
No, there aren’t. If you find any online you probably shouldn’t use them.
Media queries should be written by yourself to make sure the website looks great on all screen sizes. The way to determine that is by shrinking your browser screen. Whenever you find elements in wrong positions when the screen size has shrunk, use a media query to fix it. Different websites will had completely different media queries for different screen sizes.
It is a little tricky to reconcile the two approaches, but playing around with an example was useful for me.
I did the following to better understand how one approach could substitute for the other:
Go to the w3schools online editor/browser example for media query: Tryit Editor v3.7
Use the media query
@media only screen and (min-width: 320px) and (max-width: 480px) {
p {
font-size: 40px;
}
}
click the “Run” button and drag the (w3schools) browser pane to resize it (the dimensions of the browser pane are also shown). When the width is between 320px-480px, the paragraph’s font is 40px. Outside this range, the font defaults to medium (or 16px).
Delete the above query and replace it with two queries:
@media only screen and (min-width: 320px) {
p {
font-size: 40px;
}
}
@media only screen and (min-width: 480px) {
p {
font-size: 16px;
}
}
Now click “Run” and then drag and resize the browser pane. Same result as the first approach is observed. When the width is in the range 320px-480px, font size of paragraph is 40px. If we go beyond 480px, then the second media query overrides the first query and font size reverts to 16px.
@media only screen and (min-width: 320px) {
p {
font-size: 40px;
}
}
@media only screen and (min-width: 480px) {
p {
font-size: 16px;
}
}
and the screen width is 600px, that qualifies for both media queries, as in 600 is larger than both 320 and 480. So when you say the second media query overrides the first query, is that because CSS always goes with the media query with the biggest possible dimension for the screen size?
No, it doesn’t have to do with the dimension. It is because the latest rule wins.
In the above snippet, the 480px rule comes after the 320px rule, so the font size will be 40px when width is in the range 320px-480px. If width goes over 480px, font size becomes 16px.
Suppose we reverse the order of the queries so that the 320px query is below the 480px query.
@media only screen and (min-width: 480px) {
p {
font-size: 16px;
}
}
@media only screen and (min-width: 320px) {
p {
font-size: 40px;
}
}
Now, the font size will be 40px for all widths above 320px. The 320px query will override the 480px query, because the 320px query is at the bottom. You can confirm this by playing around in the editor I mentioned in the post above (don’t forget to click Run after you make any edits). If you swap the media queries, you will see that from 320px onward, font size is 40px.
Furthermore, if you add a rule below the media queries, e.g.
// 320px media query
// 480px media query
// A relevant rule below the queries
p {
font-size: 10px;
}
In this case, the rule at the bottom will override both media queries and font will be 10px for all widths (again try it out in the editor). That is one of the reasons the media queries should be placed at the bottom.
The range where the queries are applied is narrow (320px ->480px). You could help yourself with a wide flashy color border, who appears when you’re in this range.
Thank you!
I was just looking at this thinking that the website had made a mistake and put “min” instead of “max” but this explanation clears it up a lot.
Wish they had such a good explanation in the actual lesson!
) below.
) to up-vote the contribution!