How to make your photo gallery mobile responsive

According to Global Digital Overview, the number of mobile phone users grew in the past twelve months by 93 million. There are 5,22 billion unique mobile phone users around the world. With this in mind, every website should take really seriously into consideration to make images mobile responsive.

Under those circumstances, your galleries must become mobile responsive photo galleries too, but how? Read this article to find out how to optimize WordPress galleries for mobile. You can do that even if you are a beginner because there is no need for programming.

In this article, you will find out:

  • What plugin should you use to make mobile responsive images;
  • How to create a mobile image gallery in WordPress;
  • More customization to showcase your galleries;
  • And much more.

Why use Modula?

We live in an era where the focus is on the client. For this reason, start focusing on your clients by using a user-friendly plugin to design galleries and albums for the delights of your visitors. It is not only about being easy to use, but it is also a fully mobile responsive plugin. So, you don’t have to worry about creating a mobile responsive gallery or turning the existing ones into mobile responsive galleries.

There are many features at your disposal. To enumerate, Modula offers you four different grid types (creative, custom, masonry, slider), video extension, and many gallery features like hover effects, filterable galleries, and image loading effects. You can even password protect your galleries, add watermark and social sharing buttons, create albums, give user roles, and so much more.

In a word, Modula comes with a full package for you and covers your needs with no coding requirements.

Because it is so easy to use, creating a gallery in WordPress with Modula will take only a few minutes. You need to install and activate Modula to create a mobile responsive gallery.

Install and activate Modula

Now, I will show you how to install and activate this WordPress plugin. First, go to your WordPress Dashboard, and look for Plugins. Then, click on Add New.

WordPress menu.
WordPress menu

Next, type Modula and when you find it, click on Install Now.

Modula install
Install Modula

To activate it, you need to click on the Activate button when the installation is done. Modula will appear in the WordPress menu on the left.

modula activate
Activate Modula

Every time you want to create a gallery using this plugin, go to Modula > Galleries > Add New.

add new gallery
Create your gallery

After that, you can give your gallery a name, Animals, for example, and add your images using the Upload image files button.

add new title
Add title and upload files

This is how my gallery looks like, so far.

mobile responsive gallery
My gallery example

From the very beginning, I want to let you know that the responsive feature applies only to Custom Grid and Slider gallery types. For my gallery, I choose the Slider grid type. To select your gallery type, go to Settings > General > Gallery Type and choose from Custom Grid and Slider.

Choose gallery type
Choose gallery type

Now, you need to go to Responsive > Custom responsiveness and enable it. This way, your slider will become mobile responsive.

set gallery to responsive
Set gallery to responsive

As you could see, there are a few settings like how many slides to scroll on tablet/mobile and how many slides to show on tablet/mobile. I set the slides to one for mobile and two for tablet. Of course, you can set to how much you want depending on your images, but usually set to one keeps the page cleaner.

gallery settings
Responsiveness settings

Even if we set our gallery as mobile responsive, all the remaining features are still available to style our gallery. The responsive feature is just another one with many others. The only thing it changes is the fact that your gallery will become responsive. I want to share with you some of them that apply to both custom grid and slider gallery types.

You can start with editing your images. So, go to your pictures and click on the Edit icon.

edit images
Edit images

Start with changing their names and adding alt text, which is very important for SEO.

image title
Image title

There is another feature that allows you to edit the EXIF metadata. Edit each image’s date, focal length, lens, etc. In the end, do not forget to save your changes for each image. Click on Save & Close. You can repeat these steps for each image from your gallery.

EXIF edit

Moreover, you can design your gallery by adding borders to your images. Set the border size, radius, and color, and then select shadow size and color in the Style section.

style gallery
Style gallery

Once you’ve finished, don’t forget to save your gallery.

save gallery
Save gallery

Modula will generate a shortcode for your mobile responsive gallery. All you have to do now is copy and paste your gallery link into a page or post.


Finally, this is how you do it! Creating mobile responsive galleries isn’t such a brain surgery. It is an easy process that everyone can achieve.

Don’t hesitate and try Modula! Give your website visitors the most enjoyable experience with your galleries.

Andreea Popa
Andreea Popa

Andreea is a blog manager at WPChill who spends most of her days writing and "polishing" WordPress-related articles - entirely dedicated to Download Monitor, Strong Testimonials, and Modula. She also likes to create visual art and social media content.

Start Building Great WordPress Galleries Now

Fast, Mobile Optimised, and Pixel-Perfect Galleries... What are you waiting for?