This video focuses on how to make the features responsive by working with custom media query names to make your layout adjust depending on certain breakpoints.
- [Narrator] Right, so let's start working on…making this a little bit more responsive.…I'm going to start by adding a little bit of padding…to the top of these elements.…You can tell that they're a little bit close…to the edge here.…So, I'll do padding and just do 20 pixels…at the top and bottom.…That's going to give us a little bit more…breathing room at the top and bottom…of each one of these items.…And so next I'm going to come right here and…figure out what's going to happen when we…get to another break point.…
So, I'll do media and we'll use our…custom media query break point.…So, I'll say view port and I'm going to do something…at the medium break point here.…And, what I want to do is change the flex…direction from columns to rows.…That way at the medium break point,…and I'll have to make this wider…so that we can see, the medium break point…these are going to go side by side which is good.…
Also, the justify content center…doesn't really have an effect…whenever we're at the mobile size…so I'm just going to end up moving that…
- Organizing your CSS into partials
- Creating variables
- Using custom selectors
- Working with flexbox layouts
- Setting up a mobile layout
- Making your features responsive
- Alternating layouts
- Adding animation
- Adding videos
Skill Level Advanced
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 19m Intermediate
1. Getting Started
2. Headers and Footers
3. Featured Content
Next steps1m 6s
- 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.Cancel
Take 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.