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.
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: