This community-built FAQ covers the “Media Queries” exercise from the lesson “Media Queries”.
Paths and Courses
This exercise can be found in the following Codecademy content:
Web Development
Learn Responsive Design
FAQs on the exercise Media Queries
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!
Need broader help or resources? Head here.
Looking for motivation to keep learning? Join our wider discussions.
Learn more about how to use this guide.
Found a bug? Report it!
Have a question about your account or billing? Reach out to our customer support team!
None of the above? Find out where to ask other questions here!
should we write media query rule at top of css file or every where we want?
2 Likes
From what I’ve seen so far it tends to be at the bottom of the CSS
3 Likes
Is there any rule for top or bottom where we should put it?
All media queries should be placed at the bottom of the CSS
2 Likes
I kind of think for readability it makes more sense to put your media queries after the element your styling than at the bottom of the page. Like why would you want to scroll to the bottom for a say a banner media query ? But for now I’ll do it the way the academy wants. Just comment the heck out of your CSS and people will catch your drift. Though it seems even on Stack more experienced folk seem to do it both ways.
css - Where to put CSS3 media queries? - Stack Overflow all media queries together in a separate,styles right below the definition of that module.
2 Likes
I did get auto-check boxed on both the instructions. However, I am not sure if the code is correct. Could someone please confirm.
@media only screen and (max-width: 480px) {
.page-title {
font: smaller;
width: 270px;
}
}
2 Likes
Why do you need the only keyword? Can’t you just do the following?
@media screen and (max-width: 480px) {
body {
font-size: 12px;
}
}
2 Likes
no, you can place it anywhere
it’s better to place it after every element your styling and want to change the media query
There is a good chance that our smartphones have a higher resolution then our laptop screens. Is there a way to know the actual size of the screen to deliver better content instead of just going by the number of pixels?
what is the difference between viewport meta tag and media queries (besides that one is used in HTML and one is used in CSS)? If we want to control the size of the content on a smaller display, do we need to include both attributes?
Viewport seems to be specific and meta tag seems to be general overall. I could be wrong but that seems to be what the code is implying. Someone else chime in.
corrected answer:
@media only screen and (max-width: 480px) {
.page-title {
width: 270px;
}
}
