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!
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.
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.
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
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.
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”.
Once you open Dev’s tool, move the cursor to the line between the website and the dev’s tool. Then try to change the width, you will see the difference.
But when I choose this option and change the dimensions or choose other devices to view (iPhone, Samsung,…), the website stay the same and doesn’t change even if it’s responsive or non-responsive
Edit: I was able to see the difference between responsive and non-responsive. In next lesson, we’ll learn about meta tag which instructs browser to change screen size to user’s screen size. You can right click on <head> tag > Edit as HTML and input this <meta name="viewport" content="width=device-width, initial-scale=1.0">
The term ‘responsive’ comes from the direct intention inferred: Respond to client devices of all, or most types. That means smart phone, tablet, laptop, desktop, even smart TV, and not to exclude assistive technology by at least keeping in step with its recent iterations and improved usability.
We are not ‘shrinking’ anything, in reality. The device receives a Media Query and responds with device dimensions (aspect ratio) and orientation. The response to the client is a style sheet intended for that device scenario. Notice we are not shrinking, but resizing to give the most appropriate adaptation of the site or app to suit the device user.
Images and fonts, button placement and size, script interaction with gestures and touch screens, etc. These are all responsive concepts.
) below.
) to up-vote the contribution!
