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.

5 Likes

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.

2 Likes

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

1 Like

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.

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