Join Jen Kramer for an in-depth discussion in this video Margin or padding collapse, part of Learning Foundation 6.
- [Instructor] In my next example,…I'm going to show you how you can change…the margin or the padding across different screen sizes.…So, let's take a look at the example…that I have here in line 25.…I'm going to go ahead and add a margin to this,…just by adding grid hyphen margin hyphen x.…I'm going to save that and take a look at this page…inside of my web browser.…So, now you'll see that I have a bit of a gap here…in between my cells down here in the very last row.…As I start to shrink the screen down,…you'll notice that that margin that's in between…those cells is maintained all the way through.…
Which, maybe that's exactly what I want,…but it might be that at different screen resolutions,…I want to have something different happen.…For example, maybe here at the large resolution,…I actually don't want this grid gap to be here.…What I'd like to have is one continuous bunch of cells…that are separated maybe by a bit of padding,…but they're not going to have that gap in between them…that the margin causes.…So, I can actually collapse this margin…
- Working with the XY Grid system
- Adjusting margins and padding
- Block versus vertical grids
- Overriding CSS
- Including cards and callouts
- Customizing the navigation, including dropdown and drilldown menus
Skill Level Beginner
Building a Responsive Single-Page Design with Sasswith Ray Villalobos4h 55m Intermediate
Responsive CSS Workflow with Sass, Bourbon, and Susywith Carrie Dils2h 59m Intermediate
1. Overview of Foundation 6
2. The XY Grid System
3. CSS Overview
4. Navigation Systems
Next steps1m 33s
- 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.