Search⌘ K

Media Object Alignment

Explore how to align a media object containing an avatar and text side by side with top edges aligned on wider screens and stack them centered on narrow viewports. This lesson helps you master CSS-only solutions for responsive alignment without extra HTML or JavaScript, sharpening your ability to create adaptable layouts that adjust smoothly for desktop and mobile environments.

Problem description

The .media container holds a 120×140 avatar image alongside a block of text comprising an <h4> and a ...