Intermediate
Different crops for phones and desktops
On wide screens (800px and up) this banner should show the wide photo banner-wide.jpg; on smaller screens, the square close-up banner-square.jpg.
Wrap the image in a <picture>, add a <source> with the right media condition for the wide file, and keep the <img> (showing the square file) as the last child.
What Check tests
- There is a
<picture>element - A
<source>offers banner-wide.jpg from 800px up - The
<img>is inside the picture, last, and shows the square file - The image still has its alt text
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.