From the course: CSS: Variables and Fluid Layouts

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Rewrite CSS to integrate calc() and custom properties

Rewrite CSS to integrate calc() and custom properties - CSS Tutorial

From the course: CSS: Variables and Fluid Layouts

Start my 1-month free trial

Rewrite CSS to integrate calc() and custom properties

- [Female Instructor] Now that we have our code working with regular CSS, let's refactor it using responsive design 2.0, with custom properties and with calc. We're going to start with what's in the mobile display first. We're going to put all of our logic right there in the mobile display and we'll just leave those declarations of flex basis further down here in the media queries, just for the moment. Once we get that formula that we're going to put in up there and correct at the beginning, then we'll go ahead and make changes in the media queries. So, first of all, what we want to do is we want to calculate the flex basis of these cells and that way we have to come up with that number is basically, how do we know that certain cells are that particular width? So let's talk about that first row where we have four boxes. We originally started by saying each of those boxes was 25 percent. What was the math…

Contents