Problem: Media Object Alignment
Problem description
The .media container holds a 120×140 avatar image alongside a block of text comprising an <h4> and a <p>. The task is to display the image and text side by side with their top edges aligned on viewports wider than 480px, and to stack the image above the text, centered horizontally, on viewports narrower than 480px.
Goal
On desktop, the avatar and text must appear side by side with tops aligned; on mobile (≤480px), the avatar should stack above and be centered with the text below.
Constraints
Only CSS may be added or modified; no JavaScript or extra HTML wrappers are allowed.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: Media Object Alignment
Problem description
The .media container holds a 120×140 avatar image alongside a block of text comprising an <h4> and a <p>. The task is to display the image and text side by side with their top edges aligned on viewports wider than 480px, and to stack the image above the text, centered horizontally, on viewports narrower than 480px.
Goal
On desktop, the avatar and text must appear side by side with tops aligned; on mobile (≤480px), the avatar should stack above and be centered with the text below.
Constraints
Only CSS may be added or modified; no JavaScript or extra HTML wrappers are allowed.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.