From the course: CSS: Variables and Fluid Layouts
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Challenge: Media query integration - CSS Tutorial
From the course: CSS: Variables and Fluid Layouts
Challenge: Media query integration
(upbeat music) - [Instructor] So, time for another challenge, and we're going to continue on with the same challenge that we've been working on over the last few chapters, in terms of writing a type scale, in this particular challenge, scaling that type scale across different devices. So so far you've wrote out some stuff with Calk, we've went back and we added some custom properties, and so now it's time to add some media queries, so down here at the bottom, you'll see that I've added two empty media queries that are just waiting for you to think about how this type scale might change across devices. So what I'd like for you to do is to think about how you might go about making some changes to the type on these different devices, whatever makes sense to you, whatever you think looks good, and let me remind you that we got this type scale originally from the Type Scale website at type-scale.com. You can come here and you can…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
Mark up a simple four-column grid system6m 48s
-
Create a starting CSS for the grid system7m 1s
-
Add media queries to your grid system11m 39s
-
Rewrite CSS to integrate calc() and custom properties7m 53s
-
Rewrite CSS to integrate gaps between grid cells4m 35s
-
Make the layout formula even more flexible9m 26s
-
Challenge: Media query integration1m 24s
-
Solution: Media query integration1m 59s
-
-
-