4

Responsive Image Gallery

Resize the browser window to see the effect!

Cinque Terre

Green Forest

Northern Lights

Mountains

Here we use media queries to re-arrange the images on different screen sizes:

• If screen is larger than 768px wide - show four images side by side
• If screen is smaller than 768px - show two images side by side
• If screens is smaller than 480px - stack the images vertically (100%)

Tip: You will learn more about media queries later in our CSS Tutorial.