Responsive CSS & Media Queries

Intro

Since 2007 and the iPhone, there has been a greater emphasis on making webpages look good on screens of all shapes and sizes. Responsive Web Design means that your webpage responds to the screen size of the device displaying it. This is something which you usually have to deliberately program in to your site, especially if you have a complex layout. This has lead to the practice of always designing your mobile/small screen layout first.

CSS provides tools for detecting and changing your CSS based on a number of factors, including the size of the screen. These are called ‘Media Queries’ and learning how to use them will enable to you make all of your webpages responsive and functional on screens of any size.

Suggested Learning

• Responsive Web Design
• Responsive Guidelines

Requirements

• Fork this Codepen: Responsive CSS Assignment
• Follow the instructions in the HTML and CSS columns. Design your pen first in a mobile viewport, and then move to larger screen sizes.
• Share your pen on the #requirements Discord channel to show you have passed this requirement off.

Extra Learning

• Media Query Examples

This list is by no means complete. Feel free to add an issue or put in a pull request to update it.