From the course: Responsive Layout

Unlock the full course today

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

12-column layout for medium viewports

12-column layout for medium viewports - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

12-column layout for medium viewports

- [Instructor] Continuing on, we have the same layout and code that we finished with in the previous video. Looking at the layout, we would want to have a different layout when we get more space on the screen. Let's add a media query for what this should look like at about 600 pixels or wider. Going over to the code, I'm gonna go to the bottom of my CSS on line 22, @media, and then parentheses, min-width: 600 pixels so I'm targeting any viewport width where it's 600 pixels or wider. We're gonna start to place the elements. We want the navigation to keep going all the way across, so that one is placed fine. Next, we want to have the links and the ads elements on the left side of the viewport. We're gonna have each of these be three columns wide. Using grid-column, we're going have them start at line one and span three columns. Inside the media query, I'm targeting the links class and then I'm gonna do grid-column, and one to start it out, and then span three. After that, for the ads…

Contents