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!