Midterm Quiz

Part 1: Floats

Floats

Instructions:

Keep the width and background color of the columns from above.

Using the display property, turn these three content boxes into columns similar to the three column layout above.

Display the container as a table and the three columns as table cells.

Target the header specific to this section and color the background #ddd.

Make the layout responsive.

When the screen goes below 600 pixels engage media queries: @media screen and (max-width: 600px)

Target the columns and their container. Set display to block.

When that didn't work as expected I had to add some persuasion. !important does the trick.

Right column

Part 2: Display Table

Display Header

Display Table

Instructions:

  1. Keep the width and background color of the columns from above.
  2. Using the display property, turn these three content boxes into columns similar to the three column layout above.
  3. Display the container as a table and the three columns as table cells.
  4. Target the header specific to this section and color the background #ddd.

Make the layout responsive:

  1. When the screen goes below 600 pixels, engage media queries: @media screen and (max-width: 600px)
  2. Target the columns and their container. Set display to block.
  3. If needed, use !important to force the display to block.

Right column

Part 3: Grid

Grid header

  1. Target the section with the class "grid" and display it as a grid with a 10 pixel grid-gap.
  2. Make it horizontal with two grid flex units: grid-template-columns: 1fr 3fr;
  3. Set the header and footer to span both columns using grid-column: 1 / -1.
  4. Select all elements inside of the grid and make the background silver with 20px padding, a 20px margin, and a 5px border-radius.
  5. Target the header and set display: flex.
  6. Target the h2 inside the header and give it margin: auto.
  7. Put 1em of padding at the bottom of headings and paragraphs (or at the left if you prefer a bullet style).

Make the grid responsive:

  1. Set a media query to activate when viewport is less than 500 pixels: @media screen and (max-width: 500px)
  2. Turn grid into display block.
  3. Remove the border radius from grid children and add a 5px margin on their bottom.