Flexbox Layouting Exercise
In this lesson, we will write a mobile-first responsive layout based on the specification.
We'll cover the following
Layout specification
Write a simple responsive layout according to the following guidelines.
- The mobile layout should display each block below each other. This is just like our initial setup, except that only the first three blog posts should be visible and the rest should be hidden.
- At the
600px
breakpoint, display two posts in a row, and display all six blog posts. The width of the whole page should be600px
. - At the
800px
breakpoint, the width of the whole page should be700px
, and there should be three articles in one row.
Drag the width of the screen if needed.
Get hands-on with 1400+ tech skills courses.