Responsive Layout

Question: Why might this be important?*

What is Responsive Development?

Responsive Layout: Media Queries

Mobile Device Simulator

Mobile Device Simulation Screenshot

Link: Firefox Responsive Design Mode

Link: Chrome Mobile Device Simulator

Using Media Queries


This will make our .nav element position relative when the media type is print

// Default position layout

.nav {
  position: absolute;

// Print media only layout

@media print {
  .nav {
    position: relative;

Media Features

Each feature is a characteristic of the user-agent

Query Description
width the width of the viewport
all TRUE if the device responds to media queries
resolution Pixel density of the output device
color Number of bits per color component of the device
pointer Is the primary input mechanism a pointing device
hover Does the primary input mechanism allow the user to hover

MDN: Documentation on Media Queries

Media Query Conditionals - AND

Only change the layout to position: relative; when

@media screen and (min-width:768px) {
  .nav {
    position: relative;

Media Query Conditionals - OR

NOTE: OR is the , (comma) in a Media Query

Only change the layout to position: relative; when

@media screen, (min-width:768px) {
  .nav {
    position: relative;

Mobile-First Development

Lab: Shift It Around

Remember our old friend example-html? Let's bring it back for one final lab.

Here we have a page that is starting to look somewhat decent, but what happens when you squish the screen down?

In this lab we are going to make the index.html page look good at any size. Feel free to use flexbox, and/or grid while you complete the following tasks for mobile view (screen width < 450px)