Vertical -> Horizontal Feature Home Page Layout

This week the snippet comes from a component/module that I had created in codepen to show a client what I was referring to when talking about the layout changing from vertical to horizontal when increasing the viewport. There are three key feature blocks that need to be shown “above the fold”, on small screens we want to stack them on top of each other and on larger viewports we want to sit them next to each other.

To a lot of clients I may as well have been saying “bling blang fling flong wobble dibble dobble”. By handing them a phone, a tablet and a laptop with the same codepen open they could then see exactly what I meant.

flex-direction is such a valuable tool, not just for realigning page elements like this but for juggling items that might need their visual order different to their source order.

An excerpt from Vertical -> Horizontal Feature Home Page Layout

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.