Mobile Gallery Settings let you fine-tune supported gallery settings for phones without changing how it works on desktop. Most mobile settings start with the desktop value, so you only need to change the settings that genuinely improve the smaller-screen experience.
The default Responsive gallery layout keeps its familiar mobile column control. Mobile Gallery Settings in all FooGallery PRO plans expand on that workflow with mobile-specific spacing and supported overrides across FooGallery layouts.
Below is an example of the mobile settings available when using then Masonry layout:
Before you start
- Mobile Gallery Settings are included in FooGallery PRO Starter, PRO Expert, and PRO Commerce plans.
- Create or open the gallery you want to adjust.
- Choose the gallery layout before setting mobile values, because the available controls depend on that layout.
Switch between desktop and mobile previews
- Edit a gallery and open its display settings.
- Use the desktop and phone buttons above the preview to switch views.
- For settings that offers a mobile value, you will see the option to switch between desktop and mobile.
- Once the setting has switched to the mobile option, you can make adjustments to mobile values.
- Leave the mobile option set to Inherit when the desktop value already works, or choose a different value for phones.
- Review the updated phone preview, then update the gallery when both views look right.
How mobile values work
Mobile settings automatically use either the desktop value or a predefined mobile default, depending on the setting.
Settings that follow desktop update automatically when you change the desktop value, unless you choose a different mobile value. To make those settings follow desktop again, set their mobile value to match desktop. Some choices identify this with “Same as desktop.”
Settings with their own mobile defaults, such as mobile columns and pagination page size, remain independent of desktop. Changing a mobile setting leaves the desktop setting unchanged.
Settings available by gallery layout
Not every layout offers the same mobile controls. As of FooGallery v3.3.3 these are the available mobile settings:
- Responsive layout: columns; thumbnail gap.
- Masonry layout: thumbnail width, thumbnail gap; masonry layout.
- Justified layout: row height; max row height; thumbnail gap.
- Single Thumbnail layout: position.
- Portfolio layout: thumbnail gap.
- Carousel layout: thumbnail gap; max items to show; show nav arrows; show pagination dots.
- Slider PRO layout: aspect ratio.
- Spotlight PRO layout: dot position; autoplay.
- Grid PRO layout: thumbnail gap; max columns; panel enabled; panel open by default; aspect ratio.
- Polaroid PRO layout: thumbnail gap.
- Product Gallery layout: thumbnail gap.
- Hover effects (shared): preset size.
- Pagination (shared): page size, paging limit; first & last buttons; prev & next buttons; more buttons.
- Captions (shared): caption alignment; max title lines; max desc lines;
- Filtering (shared): limit
Responsive Gallery’s mobile-column default
From FooGallery v3.3.3, any new Responsive Gallery will start with two columns set for mobile. When updating an older gallery, choose Auto if you want FooGallery to calculate the phone layout automatically instead.
What happens when the screen size changes
FooGallery detects when a screen crosses the mobile breakpoint and refreshes the gallery with the appropriate settings. This covers phone or tablet rotation, resized browser windows, and page-builder previews without requiring a full page reload.
Tips for a cleaner phone layout
- Start with the inherited desktop values and change one setting at a time.
- Use fewer columns when thumbnails or captions feel cramped.
- Keep navigation controls easy to tap and avoid crowding the image area.
- Check your page on a real phone after updating the gallery.
