Q: What is the width of the following? (Hint: it's not 100px)

  .box {
    height: 100px;
    width: 100px;
    border: 1px solid black;
    padding: 20px;
  }

• Apply box-sizing: border-box; to previous CodePen

  .box {
    height: 100px;
    width: 100px;
    border: 1px solid black;
    padding: 20px;
    box-sizing: border-box;
  }

• Inspect the element's overall width

GA's Responsive Changes:

• So far, layouts have been fixed (eg 960px)

• Container elements have had a fixed-width

• Content will render the same across screen sizes

• Targeted CSS styles based screen size:

  @media screen and (min-width: 900px) {
    body {
      background: blue;
    }
  }

• When width >= 900px style the background blue

• CodePen Example

Within CSS Stylesheet:

  @media screen and (min-width: 1024px) {
    ...styles here
  }

Media Type: screen

Only target devices with a viewable screen

Rule: (mid-width: 1024px)

Only target windows larger than, or equal to, 1024px

all: Suitable for all devices

handheld: Intended for handheld devices

print: Intended for paged material and for documents viewed on screen in print preview mode

screen: Intended primarily for color computer screens

tv: Intended for television-type devices

- W3.org

• min-width: ___ px

Targets widths greater than or equal to __ px wide

  @media screen and (min-width: 1000px) { ... }

• max-width: ___ px

Targets widths less than or equal to __ px wide

  @media screen and (max-width: 1000px) { ... }

Don't have to specify a media type:

  @media (min-width: 700px) { ... }

Multiple rules:

  @media (min-width: 320px) and (max-width: 480px) { ... }

• These styles will only apply on devices between 320 and 480 pixels