From the course: Responsive Layout
Unlock the full course today
Join today to access over 23,200 courses taught by industry experts.
12-column layout for medium viewports - HTML Tutorial
From the course: Responsive Layout
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
(Locked)
Centering content1m 54s
-
(Locked)
3-column layout with grid areas, part 13m 33s
-
(Locked)
3-column layout with grid areas, part 24m 10s
-
(Locked)
3-column layout with flexbox3m 14s
-
(Locked)
12-column layout setup4m 7s
-
(Locked)
12-column layout for medium viewports3m 24s
-
(Locked)
12-column layout for wide viewports2m 58s
-
(Locked)
-