CSS Responsive Design

According to recent data, more than half of all website traffic worldwide is from mobile devices. So it is crucial, more than ever before, that all of our web sites are responsively designed and adapt to the devices they're viewed on.

In the previous lessons we learned how to write page layouts with grids and how to implement flexible site components with flexbox.

In this lesson we are going to learn how change CSS properties based on a device's screen size, various approaches to designing web sites that work well on all devices and how we can use our browser to test the responsiveness of a page.