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.
Step 2: Add custom properties to grid layout - CSS Tutorial
From the course: CSS: Variables and Fluid Layouts
Step 2: Add custom properties to grid layout
- [Instructor] With our grid layout in place and understood let's rework what we have here with custom properties. Remember the goal is to put all of the logic and all of the declarations in one place, which is outside the media queries in our mobile layout and then anything that's going to change from the mobile layout into our media queries that will become something with a custom property. So let's just take a look at our layout here to start with. I have a little comment up here on the top. As part of our layout, we had some margins in place that worked really well for mobile dimensions. And if you notice, I changed some of those values here inside the media query. So for example, we can start with the content. Here, I have a margin of two rem, one rem here outside of the media queries. When we go into the media queries, I change that margin to three rem auto. And that's pretty much where it stays. We don't really…
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.