FotoGrids serves a different column count and layout on phones, tablets, and desktops so your galleries read well on every screen. The Responsiveness settings control the pixel widths where FotoGrids switches between those three layouts, and how it decides which one to serve. These are site-wide settings that apply to every Gallery and Album.
Location FotoGrids → Settings → Responsiveness
Breakpoints #
A breakpoint is the screen width at which FotoGrids changes layout. Two breakpoints define three ranges: mobile, tablet, and desktop. Widths below the mobile breakpoint use the mobile layout; widths between the two breakpoints use the tablet layout; widths above the tablet breakpoint use the desktop layout.
Mobile
| Setting | Mobile |
| Default | 767px |
| Units | px |
Below this width, mobile layout rules apply. The default of 767px is the common dividing line between phones and tablets.
Tablet
| Setting | Tablet |
| Default | 1024px |
| Units | px |
Below this width and above the mobile breakpoint, tablet rules apply. Anything wider than this is treated as desktop. The default of 1024px matches the width of many tablets in landscape.
Preview
The preview shows three device frames — mobile, tablet, and desktop — labelled with the ranges your current breakpoints produce. It updates as you change the values, so you can confirm the ranges make sense before saving.
These breakpoints set when each layout takes over. The number of columns shown in each range is configured per Gallery in the layout settings.
Detection Mode #
Detection mode controls how FotoGrids decides which of the three layouts to serve to a given visitor.
Detect by
| Setting | Detect by |
| Options | Viewport width Device & browser |
| Default | Viewport width |
Viewport width — FotoGrids chooses the layout from the actual width of the browser window. This is the most predictable option and the recommended default: a window of a given width always gets the same layout, whatever device it is on.
Device & browser — FotoGrids chooses the layout from the device’s reported capabilities rather than the window width. This is heuristic-based and can differ from one browser to another, so it is best reserved for cases where viewport-width detection does not give the result you want.
Choosing Your Breakpoints #
The defaults — 767px and 1024px — suit most sites and match widely used device sizes. Adjust them only if your theme uses different breakpoints and you want FotoGrids to switch layouts in step with the rest of your design. Because the settings are site-wide, a single change keeps every Gallery and Album consistent across your site.
