Exercise: Media Queries

Opened: Monday, 22 July 2024, 12:00 AM

Choose a file from the DWCTraining Github and change something about it when the screen is below or above a value.
Here are a few ideas:

  • Make an element disappear with display: none;
  • Change a custom property such as font size: dwc-font-size: var(--dwc-font-size-xs);
  • Completely change your CSS Grid layout
Either make use of the MediaQueryExample.css or here is an example to quickly show you how a media query is structured:

@media (width < 600px) {
<CSS Selector> {
<CSS Styles>
}
}

Should you get stuck, just look at the MediaQueries.bbj or at some other examples outside this course.

Good Luck!