Join Clarissa Peterson for an in-depth discussion in this video 12-column layout for medium viewports, part of Responsive Layout.
- [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 class,…I'm gonna do the same thing, grid-column:…
Author
Released
10/24/2018- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox
Skill Level Intermediate
Duration
Views
Related Courses
-
HTML Essential Training
with James Williamson5h 54m Beginner -
CSS Essential Training 1
with Christina Truong2h 36m Beginner -
CSS Essential Training 2
with Christina Truong2h 21m Beginner
-
Introduction
-
What you should know1m 7s
-
1. Basic Page Structure
-
Viewport2m 22s
-
Required CSS3m 39s
-
Display property2m 25s
-
Positioning4m 59s
-
Floats2m 37s
-
Units3m 33s
-
-
2. Responsive Layout
-
Responsive design1m 55s
-
Media queries6m 25s
-
Flexbox and Grid1m 9s
-
Accessibility5m 48s
-
Browser support1m 36s
-
-
3. Grid Layout
-
Intro to CSS Grid2m 10s
-
Defining rows and columns3m 55s
-
Grid gap1m 52s
-
Sizing rows and columns5m 52s
-
Placing grid items5m 51s
-
Grid alignment overview1m 13s
-
Aligning tracks3m 46s
-
Variable columns4m 45s
-
Grid template areas4m 12s
-
Naming grid lines2m 47s
-
Ordering grid items1m 16s
-
Solution: The rainbow box6m 42s
-
-
4. Flexbox
-
Defining a flexbox container1m 53s
-
Direction3m 36s
-
Wrapping2m 30s
-
Ordering flex items1m 28s
-
Flexbox alignment overview1m 39s
-
Aligning items on main axis3m 16s
-
Aligning items on cross axis3m 35s
-
Aligning lines on cross axis3m 15s
-
Challenge: Floats to flexbox1m 21s
-
Solution: Floats to flexbox8m 17s
-
-
5. Layout Design
-
Centering content1m 54s
-
3-column layout with flexbox3m 14s
-
12-column layout setup4m 7s
-
-
Conclusion
-
Next steps35s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: 12-column layout for medium viewports