Mobile Gallery Settings let you fine-tune supported gallery settings for phones without changing how the gallery works on desktop. Most mobile settings start with the desktop value, so you only need to change the controls 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 layout, spacing, caption, hover, pagination, lightbox, and panel overrides across supported FooGallery layouts.
Below is an example of the mobile settings available when using the 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 offer a mobile value, use the device control beside the setting to switch from desktop to mobile.
- Adjust the mobile value. Conditional controls, such as hover-effect or lightbox options, appear when their parent option is enabled.
- Leave the mobile option set to Inherit or Same as desktop when the desktop value already works.
- Review the updated phone preview, then update the gallery when both views look right.
How mobile values work
Mobile settings use either the desktop value or a predefined mobile starting value, depending on the setting. Changing a mobile value leaves the desktop setting unchanged.
Settings that inherit from desktop continue to follow desktop changes until you save a different mobile value. To make one of these settings follow desktop again, choose Same as desktop when that choice is available, or reset the mobile control to its inherited value.
Mobile caption Title and Description source overrides affect thumbnail captions only. Lightbox captions continue to use the desktop caption-source settings.
Settings available by gallery layout
Not every layout offers the same controls. As of FooGallery v3.3.7, these layout-specific mobile settings are available:
- Responsive: columns and thumbnail gap.
- Image Viewer: no layout-specific mobile controls; supported shared controls are still available.
- Masonry: thumbnail width, thumbnail gap, Masonry layout, and gutter size.
- Justified: row height, maximum row height, and thumbnail gap.
- Single Thumbnail: position.
- Portfolio: Thumbnail Size (mobile display width only) and thumbnail gap.
- Carousel: thumbnail gap, maximum items to show, scaling, navigation arrows, and pagination dots.
- Slider PRO: aspect ratio, including custom ratio width and height.
- Spotlight PRO: pagination-dot position, autoplay, and Autoplay Seconds (the autoplay interval).
- Grid PRO: thumbnail gap, maximum columns, panel enabled, panel open by default, and panel aspect ratio.
- Polaroid PRO: thumbnail display width and thumbnail gap.
- Product Gallery: thumbnail display width and thumbnail gap.
Shared mobile settings
These are possible controls, not a set shown for every gallery. The selected layout, enabled features, PRO plan, and related settings determine which controls appear. Slider PRO, Polaroid PRO, and Product Gallery omit some shared fields.
- Hover effects: hover-effect type; preset size; theme; color effect; scaling effect; transition; icon; and icon size.
- Captions: caption visibility; caption alignment; title source; description source; maximum title lines; and maximum description lines.
- Lightbox: thumbnail position; thumbnail-strip captions; thumbnail size; show controls on hover; fullscreen, caption, thumbnail-strip, download, and previous/next buttons.
- Grid PRO and Slider PRO panels: supported lightbox-style controls from the list above, plus the maximise button. These controls appear in the layout’s Panel or Slider section.
- Pagination: page size; paging limit; first and last buttons; and more buttons. These appear only where the layout supports paging and the selected paging type uses them.
- Filtering (PRO Expert and PRO Commerce): result limit, when the layout supports filtering and filtering is enabled.
The lightbox’s Prev/Next Buttons can have a mobile value. The separate Prev & Next Buttons setting for numbered pagination does not have a mobile override.
Defaults for new galleries
- Responsive columns: new Responsive galleries start with two columns on mobile. Choose Auto if you want FooGallery to calculate the phone layout automatically.
- Pagination page size: new galleries start with six items per mobile page when mobile pagination is available. Existing galleries inherit their desktop page size until you save a mobile override. A value of zero keeps the gallery unlimited.
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 or a smaller thumbnail display width when images or captions feel cramped.
- Use the mobile hover-effect controls to avoid relying on effects that need a mouse pointer.
- Keep lightbox and navigation controls easy to tap and avoid crowding the image area.
- Check your page on a real phone after updating the gallery.
