FAQ: Media Queries - Breakpoints

This community-built FAQ covers the “Breakpoints” 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 Breakpoints

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 (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 (reply) below!

Agree with a comment or answer? Like (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!

The lesson says the following about finding breakpoints:

“Rather than set breakpoints based on specific devices, the best practice is to resize your browser to view where the website naturally breaks based on its content. The dimensions at which the layout breaks or looks odd become your media query breakpoints.”

How do we know the dimensions it breaks at when resizing though? I can see when it breaks, but I don’t know what that width is in pixels. Do we just take a guess or is there some kind of tool we can use?

Thanks!

1 Like

You could use responsive design mode:

https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode

Firefox has it for sure, not sure about chrome. But surely tools exist for it. Google is your friend

seems to exist for chrome as well:

https://developers.google.com/web/tools/chrome-devtools/device-mode/

2 Likes

Hi,

I would also like to have a question regarding this topic.
In the examples the usual landscape width is mentioned to be 1024px.
New phones and tablets are not 1080px wide?

Thanks,
David

The simplest tool I’ve found is (on mac) to use screenshot measuring. Simple press command-shift-4 and you will see the measure device then drag to measure. It’s simple. Also, to avoid actually taking a screenshot, just hit the escape key before you release the mouse or pad.

2 Likes

I notice that “clearfix” is being appended to the page-description class in the html of this exercise - but no mention of it in the lesson. It looks like this is from bootstrap. I see no mention of it in the CSS file of it either, if removed it messes up the way the content is shown.

Can someone elaborate on the use of “clearfix” how does it work with html and css?

i found it here:

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

see the note

https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/learn-responsive-design-module/lessons/media-queries/exercises/breakpoints On number 2 of this excercise, asks me to re-write “.page-descirption” in order to algin the text to the left.

Why do I need to do it in a separate line if I could just include the left alignment within the first set of {} which is “.page-title, .page-description”???

because that would apply the alignment to both title and description.

For breakpoints, would that mean you can improve your website and its adaptions through trial-and-error?

Hi, where should media queries be written in the stylesheet?

Preferably, at the bottom. This will help prevent unexpected styles being applied to your web page. If you style a certain element after its media query, the declarations in the rule set furthest down will override anything else

yes. That’s what CSS is all about. It is very unlikely for you to style your web page perfectly first go

In this lesson, we added one final media query to our code:

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .page-title,
  .page-description {
    float: left;
  }

  .page-description {
    text-align: left;
  }
}

Everything seems clear to me. When the width of the screen used to view our web page has a width of at least 768px and at most 1024px, and it is in landscape mode, the .page-title and .page-description elements will float left. This means that it will be positioned to the far left of their parent elements, and any text and inline elements will wrap around them

However, the output was a bit unexpected.

We can see that the footer at the bottom of the page doesn’t actually wrap around the .page-title and .page-description elements. I guessed that it was because it the <nav> element was a block-level element. however, when I set its display property to inline, the output was the same. Does anybody know why?

So, I’m curious. The lesson refers us to this list of breakpoints for devices. Mobile phones in this chart and throughout this exercise are targeted by a width of less than or equal to 480px. Now, forgive me if I’m wrong, but by now I can’t remember the last time I encountered a smartphone that didn’t have a resolution of at least 720p. Do any of these 480px media queries work on a 720p phone? Or would you have to additionally specify a DPI (a 5" 720p phone would have a DPI of 256, by my reckoning) or a max-device-width (e.g., @media only screen and (max-width: 720px) and (max-device-width; 720px) )?

My initial response was the same, a bit sceptical, but the lesson here is valid even if the actual numbers are a bit out-dated.

If you’re designing a web page on a you-beaut new 8K monitor, you will need to allow for users who are still stuck with an old-fashioned 720p HD screen.