From the course: Practice It: CSS Layout

Unlock the full course today

Join today to access over 24,900 courses taught by industry experts.

Twelve-column layout for different viewports

Twelve-column layout for different viewports - CSS Tutorial

From the course: Practice It: CSS Layout

Start my 1-month free trial Buy for my team

Twelve-column layout for different viewports

“

- [Instructor] Continuing on with this layout, let's add a media query at about 600 pixels. So I'll add one here @media (min-width: 600px.) And in my curly braces, I will call up the related container. And I want related to go over to the side of the main content, to the left side, so I'm going to want it to start on grid-column one and span the first three columns. So I'll assign it to grid-column: 1 / span 3. And then I also need to apply a grid-row, because I want it to appear on our third row beside the main, so grid-row: 3. Now, I also want these ads to move down a row and be beside the footer at the bottom of the page. So I'll also call up ads and assign them also to grid-column 1 / span 3 and assign them to grid row four. Now for the main content and the footer, I want them to both take up the rest of the space to be beside related content and ads. So I can actually call them up together, main, footer. And then I…

Contents