This community-built FAQ covers the “Review: 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 Review: 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!
In the last review point on media queries, the suggestion is to set the queries based on the natural breakpoints specific to your site when resizing the browser. Any guidance on how to perform that task, specifically? I understand conceptually, however, I’m not sure where or how I find that information in order to have parameters for my query executable rules…?
Chrome tools has a feature called the Media Query Inspector that allows you to trigger the breakpoints you define using media queries as well as allowing you to play around with your site to see where it starts to break by displaying a pixel-counter that tells you the exact width at which point things start getting wonky.
You can enable this feature by going to Chrome Tools, toggle the device toolbar (ctrl-shift-M), and then in the very top right corner, click on the 3-vertical-dots icon and select ‘Show media queries’ to display a new bar at the top that visually represents where you set the width trigger of your media queries. You can now drag the left or right side of your website representation to trigger your media query rules.
1 Like
The problem is: how do you set media queries today when even a 6.5 inch phone can have 4k display? (looking at you xperia). Tablets often have the same or even lower resolution than phones as they are usually cheaper. How do you make content well visible in such cases?
We can use units such as mm. So a 6in the phone would be 152.4 millimeters. So you can use physical units instead of digital units in media queries to combat this.
I noticed that there is a file in the ‘css’ folder in the directory for these lessons called ‘reset.css’ that serves as an additional style sheet. Scrolling through it seems pretty straightforward (thanks to the documentation included in the code) what it does, but I was wondering if Codecademy actually delves into this reset.css they’ve included at any point?
Do we have to use the viewport meta tag to utilize media queries or are they completely separate?
