CSS Responsive Exercises

ATTENTION: this exercise uses CSS positioning!

This repository provides basic CSS responsive exercises and their solution.

The description of the individual tasks can be found here.

It is recommended to know about the following responsive units and media queries in order to complete the exercises.

Responsive Units

• rem, em
• vw, vh
• %

Calculating with units:

• calc(100% - 2rem + 15vh)

Media Queries

• width
  • min-width
  • max-width
• aspect-ratio
  • min-aspect-ratio
  • max-aspect-ratio
• orientation
  • landscape
  • portrait
• resolution
  • min-resolution
  • max-resolution
• prefers-color-scheme
  • dark
  • light
• prefers-reduced-motion
• prefers-contrast
  • no-preference
  • more
  • less
• any-pointer
  • none
  • coarse
  • fine

Links to inform yourself

• Responsive Design

• Beginners Guide to Media Queries

• Using Media Queries

• Responsive Images

• Picture Element