FAQ: Media Queries - Responsive Web Design

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

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!

On page 1/8, where two versions of the same website are linked (one version that’s supposed to be responsive, one that isn’t), both websites look and respond identically in my browser, no matter how much I play with the browser’s dimensions. Is that supposed to happen? I’m using Chrome 74.0.3729.108 (the latest version as far as I know) on OSX.


The first thing you should notice if starting at say 1000px width and shrinking down to around 600px is the title changes font size and position, and the ‘selected titles’ goes from the left to the center and heading background is screen-wide. Notice also how the background image of the header is smaller and looks centered again.

Shrink all the way down and watch the images change size.


Both links bring me to the same non responsive website in my browser too!


Yes you are right, I tried on my mac this exercise and it didn’t work, both links were doing the same, but then I tried on an external screen and I could tell the difference.

1 Like

They look identical but if you pay attention to the red banners that say “Selected Titles” and “Contact” you’ll see the small difference.

I’m having the same issue as well on my Mac with Chrome browser–both sites are the same in terms of responsiveness.

1 Like

Both links redirect you to identical-looking web pages. However, if you shrink your browser window’s width, you will see a difference. Try making its width very small and you should see a difference

1 Like

Both sites look the same regardless of resizing

1 Like

Guys, open them in two separate windows, pull them to the smallest width possible and then compare them next to each other! You will definitely see the difference

There’s definitely no change in behavior between both sites. I resized them in all possible ways, side to side, with DevTools and they look exactly the same.

1 Like

So Codecademy here needs to either provide a better example which actually shows the difference or a screenshot at least of what is the difference rather than letting learners keep playing “find the difference”.