Home > Latest Articles > Balancing Text and Images with Flexbox

Balancing Text and Images with Flexbox

This semester’s end-of-year work by my students often exhibited lengthy body copy creeping alongside and under images, or images that were far too large next to snippets of microcopy.

Part of a designer’s job is to balance text and images harmoniously: one should never overpower a web page at the expense of the other. This is most especially important in callouts – typically small runs of text with single illustrations – which must be fluid and adaptable to both changing screen sizes and an unpredictable or changing amount of content. After a little experimentation, I found a nice way to deal with the demands of both, using a combination of flexbox and background images.

Making Modules

The basic markup consists of a element with two elements inside it. For the example above, those elements are inside an element with a class of column. Just one of the modules is shown below:

Read Full Article

admin
The WebRecital is a dedicated User Interface/User Experience professionals who come together to provide design and research workshops, portfolio reviews, and educational outreach to the greater Seattle area.
http://webrecital.com/

Leave a Reply

Your email address will not be published. Required fields are marked *