Learn

When someone visits a website, it’s possible they are viewing it on a phone, tablet, computer, or even a TV monitor. Because screen sizes can vary greatly across different devices, it’s important for websites to resize and reorganize their content to best fit screens of all sizes.

When a website doesn’t respond to different screen sizes, the website may look odd or become indecipherable on certain devices. This usually occurs on smaller screens, like phones. When a website responds to the size of the screen it’s viewed on, it’s called a responsive website.

Because websites can be displayed on thousands of different screen sizes, they must be able to respond to a change in screen size and adapt the content so that users can access it.

Instructions

Let’s take a look at a website that does not respond to different screen sizes.

  1. First, visit this site.
  2. Then resize the width of your browser to simulate a smaller screen size. Note how the content on the web page does not shrink as you resize the browser’s width.

In contrast, let’s take a look at a responsive website.

  1. First, visit this site.
  2. Again, resize the width of your browser and note how the content on the web page resizes and reorganizes itself.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?