Join Morten Rand-Hendriksen for an in-depth discussion in this video Adding responsive breakpoints, part of Advanced Responsive Layouts with CSS Flexbox.
- View Offline
- As you saw in the previous movie, Flexbox allows you…to create advanced grid patterns,…like this card pattern you see here,…really effectively and simply.…The problem is, as I was applying this new code,…I broke a cardinal rule of responsive web design:…I did this without accounting for smaller screens.…Because, as I've said before, you should always design…and write your code mobile first.…If I go to look at the browser tools here…and display my page using an emulated iPhone 6,…you will see what I'm talking about.…
We still have the three columns, even though we're…on a really tiny screen.…Because we've squished down the columns,…you can see that the text is spanning…outside of the boxes, and it looks like a big mess.…What I need to do now is add in some media queries…and some break points,…so that my content is displaying properly…across all different screen types.…That starts with removing Flexbox…from the smallest possible screen.…Back in my code editor, I'm gonna grab…all the code I've wrote in the previous movie…
This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see.
- Creating Flexbox-powered menus
- Building a responsive card layout
- Marking up and styling the holy grail layout
- Changing displays
- Showing and hiding the sidebar
- Animating content