From the course: CSS: Variables and Fluid Layouts
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Solution: Media query integration - CSS Tutorial
From the course: CSS: Variables and Fluid Layouts
Solution: Media query integration
(upbeat music) - [Instructor] So, how'd you do with that challenge? This is my particular solution. As before, we don't really need to touch the HTML at all, and I actually didn't touch any of the code that we wrote already either. So what I've done here is simply gone ahead and worked with a different type scale at mobile dimensions. 1.125 is the major second, and if you take a look here, all of that math is all still the same. Then down here in my media queries, all I did was change the factor for my type scale. So if you watch my type over here, you see we start at mobile dimensions with not a lot of difference between those type sizes, and as I hit my various breakpoints, those type sizes will increase. Now the base is always the same. The base font size was set to be 16 pixels or one m. And in fact, in the math that we have here, that's just currently set to one m. here, and you could have changed that to a…
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
-
-
-
-
-
(Locked)
Mark up a simple four-column grid system6m 48s
-
(Locked)
Create a starting CSS for the grid system7m 1s
-
(Locked)
Add media queries to your grid system11m 39s
-
(Locked)
Rewrite CSS to integrate calc() and custom properties7m 53s
-
(Locked)
Rewrite CSS to integrate gaps between grid cells4m 35s
-
(Locked)
Make the layout formula even more flexible9m 26s
-
(Locked)
Challenge: Media query integration1m 24s
-
(Locked)
Solution: Media query integration1m 59s
-
(Locked)
-
-