Made in Europe, buy from Europe.
A mobile responsive gallery in WordPress reflows to fit the screen. Four columns on your laptop become two on a tablet and one on a phone, so nobody has to pinch, squint or scroll sideways.
The phone version is the one most people see. DataReportal counts 5.86 billion mobile phone users (October 2026), and phones carry 52.6% of the world’s web traffic. Google ranks the mobile version of your site too, crawling with its smartphone bot only since July 2024.
We make Modula, and this guide uses Modula 3.0, where Responsive is already on: 2 columns on tablets, 1 on phones.
Good to know
In short: open Layout → On phones and tablets, set your columns, check the Mobile preview, then test on a real phone.
Set your gallery columns for phones and tablets
In Modula, go to Layout, check that Responsive is on, and open On phones and tablets. The defaults:
- Columns: 2 for tablets and 1 for phones (1 to 6), set with the Tablet and Mobile buttons.
- Treat as a tablet under: 1024 px.
- Treat as a phone under: 600 px.
One column or two? One gives every photo the whole screen width: ideal for a portfolio where each image carries weight.
A wedding photographer posting 300 proofs wants two, so the couple can scroll the whole day without a sore thumb. A potter’s 12 product shots read better in two columns too.
Want two columns on phones in a Masonry gallery? Click the phone button next to Columns and set it to 2. That button is easy to miss.
Match those two breakpoints to your theme. If it switches to its phone layout at 768 px, set Treat as a phone under to 768.
Turn Responsive off and phones get your desktop columns: four on a 390 px screen turns photos into stamps.
Canvas, Creative, BnB, Showcase, Story and Video gallery don’t show On phones and tablets.
Preview and test your mobile responsive gallery
Test a mobile responsive gallery twice: with the Desktop / Tablet / Mobile bar under Modula’s preview, then on a real phone. Every per-device slider follows the bar, so switch to Mobile first and whatever you drag becomes the phone setting.
Try portrait and landscape: sideways, a 390 px phone is over 600 px wide and shows tablet columns. The preview can’t see your theme’s padding and menus, which eat into the gallery’s width. No phone handy? Your browser’s device mode is a fair stand-in.
New to Modula? Start with our guide to creating a gallery or the phone and tablet help article.
Adjust gaps and captions for small screens
Modula’s Space between images has Desktop, Tablet and Mobile values (10 px each). Ten pixels feels airy on a laptop but wastes room on a phone, so try less on Mobile (Justified grid keeps its desktop gap).
Captions shrink on phones too: titles from 16 to 12 px, captions from 14 to 10. Squinting at 10 px? Nudge Mobile up. Then choose where the text lives:
- Under the image: pick it in Where it sits for text people should see without tapping, like names or credits.
- Bubble on small images: on by default. Tiles under 240 px move their text into a bubble, which a phone opens after a half-second press and hold.
That bubble kicks in sooner than you’d think. Two columns on a 390 px phone give tiles of about 185 px, so every caption becomes a bubble, even under-image ones. If the words matter, put them under the image and switch the bubble off (more on captions).
How each gallery type looks on a phone
Most Modula grid types follow your Mobile columns; the rest have their own phone layout. Modula doesn’t swap types by screen size, so pick one whose phone version you like.
| Type | On a phone | You control |
|---|---|---|
| Masonry, Uniform grid, Fit grid, Parallax (Pro) | Your Mobile columns | Columns, breakpoints |
| Custom grid | Mobile columns once the gallery is 568 px wide or less | Columns |
| Justified grid | Ignores Columns: same row height, fewer photos per row | Row height |
| Creative | Every photo packed into one box as tall as Minimum height | Mobile Minimum height |
| Polaroid | Columns with Same size for every print on; otherwise like Creative | Columns or Minimum height |
| Canvas (Pro) | One full-width column once the gallery is 600 px wide or less | – |
| BnB (Pro) | A 4:3 hero on top, 2×2 squares below, no carousel | – |
| Slider (Trio and up) | Your per-device slide count (try 1 on phones, 2 on tablets) | Visible at once, Advance by |
| Showcase (Pro) | One photo at a time, neighbors peeking in | Simplify on phones |
| Story (Pro) | A 9:16 frame up to 420 px wide | – |
| Video gallery (Starter and up) | Right playlist keeps an 80/20 split; Bottom is a swipeable row | Playlist position |
Creative: forty photos in the default 800 px box turn into tiny tiles on a phone, so raise the Mobile Minimum height.
BnB: only the hero and four more photos sit on the page. Show all photos opens the rest in the lightbox, so put your must-see shots first.
Video gallery: a right-hand playlist gets cramped on phones. If most viewers watch there, set Playlist position to Bottom.
Taps, swipes and zoom in the lightbox
Modula’s lightbox, the full-screen photo viewer, already speaks touch: visitors swipe between photos, drag a photo up or down to close it, and pinch to zoom in.
Two Pro settings under Lightbox help on phones:
- Open lightbox on: pick All devices, Desktop only or Mobile only. The split is a fixed 1,024 px window width, not your gallery’s breakpoints, so most tablets count as mobile.
- Open on double-click or double-tap: a thumb scrolling past the gallery won’t open photos by accident.
Tip
With the Lightbox Zoom extension (Business) active, pinch zoom needs Enable lightbox zoom on.
Hover effects on touch screens
Phones have no hover. The effect you pick under Motion shows for the instant of the tap, at most, before the lightbox opens. So:
- Text that appears only on hover never really shows. Put it under the image.
- A video tile’s Preview on hover doesn’t play on touch.
- Share icons fold into one round button at 992 px and below, and a tap opens them.
Keep the effect for desktop visitors.
Keep photos sharp and pages light on phones
Modula gives phones sharp photos without you picking a bigger size. Every image gets a srcset, copies up to 1,600 px wide, and the browser works out each tile’s width. A full-width tile on a 390 px, 3× phone needs about 1,170 real pixels, so the browser picks a copy at least that big.
That’s why Image file size (Medium by default) isn’t a quality cap. It sets the base file and crop.
What helps:
- Upload at 1,600 px or more on the long edge, so the biggest copy exists.
- Keep Load images as people scroll on. It’s the default, so 300 proofs don’t all download at once.
- Turn on Pagination and set a Mobile value for Images per page (Business) to load fewer photos on phones.
- Use Collapse on phones or Dropdown on phones for long filter rows (every Pro plan).
- Compress and use a CDN, from the Trio plan up (speed tips).
Frequently asked questions
One column is Modula’s phone default. In Layout → On phones and tablets, click the phone button next to Columns and set it to 2 or more. Still one? Justified grid ignores Columns, and Canvas stacks into one column on phones.
Yes. Set Tablet and Mobile to your desktop number (they go up to 6), or turn Responsive off. Preview first: three columns on a 390 px phone means tiles about 120 px wide, so every caption turns into a bubble.
Yes. Columns, breakpoints, per-device gaps, caption sizes and placement, the device preview, srcset, lazy loading and the touch lightbox are all free, with 7 of the 14 gallery types. Open lightbox on, double-tap opening, filters, pagination, Lightbox Zoom and the Pro types need Modula Pro.
Partly. The core Gallery block is a basic responsive image gallery with one fixed rule: below 600 px it shows two images per row unless you set 1 column. Your 3–8 column setting applies only from 600 px up, and an odd last photo stretches across its row. Anything else takes custom CSS or a plugin.
