From the course: CSS: Advanced Layouts with Grid

Unlock this course with a free trial

Join today to access over 25,000 courses taught by industry experts.

Make sure it's responsive

Make sure it's responsive - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial Buy for my team

Make sure it's responsive

“

- [Narrator] Now that we've got both a primary grid defined with the cards placed on it and individual grids for each card with their items placed, the last thing I want to do here is make sure that this design looks good at different viewport sizes. You may remember from earlier that we've already got this site container set with a max width of 1200 pixels. And on this cards container, which is our primary grid, we've got a break point at 980 pixels to go from a one column to a three column layout. But if we keep making the viewport smaller and looks like somewhere around 600 pixels, this is where things start to get a little squished on these cards. So let's add a break point here, where our two column cards drop to a single column. And note that cards three here with Fred and four here with Cosmo, these are already single column so they can stay as is. Let's head over to our style sheet for this lesson and here, where we've defined the grid for our single cards, I'll add a break…

Contents