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 wide viewports

12-column layout for wide viewports - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

12-column layout for wide viewports

- [Instructor] To create our third layout variation, we're going to add another media query at 900 pixels. So going down to the end of my CSS on line 39, I'm gonna do at media, in parentheses min-width 900 pixels, and add the brackets. So the links we still want over here on the left side, but since the columns are wider in this wide layout, we're only gonna have the links box span two columns. It's the same row as before, so we don't need to add CSS for the row. So I'm just going to do links and then grid-column colon one span two, save and refresh, and we're not wider than 900 pixels, so I'll have to move the browser window. Now you can see that the links are only filling up two columns over on the left. Next we're going to move the content over to start in the third column. Back here in the media query, I'm going to do content and then grid-column colon three span seven. It's gonna go seven columns across. Save. Go back to the browser and refresh. Now that main content goes across…

Contents