O'Reilly logo

WordPress Responsive Theme Design by Dejan Markovic

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Making the gallery responsive

The final step in the creation of a gallery is to make it responsive. For example, if we, resize the browser to the phone size screen, we will get this:

Making the gallery responsive

The caption is bigger than its image and images are beside each other, because these images are responsive (they resize together with the screen, so they look good across all devices), and the caption has a fixed size of 150px, as you can see it from our code in style.css:

.gallery-item  figcaption {
    width: 150px;
}

As the phone screen is too small, we should put our images into their own rows and their captions just below them. Because we are now handling a mobile size ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required