Media Query Example 3

Alley Spring Mill
Alley Spring Mill

Resize the viewport to see the demo.

HTML

<figure>
    <img src="AlleySpringMillmedium.jpg" alt="Alley Spring Mill">
    <figcaption>Alley Spring Mill</figcaption>
</figure>

CSS

img {
    max-width: 100%;
}

figcaption {
    text-align: center;
}

figure {
    width: 400px;
    border: thin solid black;
    padding: .5em;
    background-color: whitesmoke;
    display: inline-block;
}

@media (min-width: 800px) {
    figure {
        width: 600px;
    }
}


@media (min-width: 1000px) {
    figure {
        width: 800px;
    }
}