Responsive & Mobile Layout Settings
A hover effect that looks stunning on desktop can look cluttered or broken on a phone if responsive settings aren’t configured correctly. Image Hover Effects Ultimate includes responsive layout controls so you can fine-tune how your galleries look on every screen size. Here’s how to use them.
Why Responsive Settings Matter
More than half of website traffic now comes from mobile devices. If your hover gallery shows 4 columns on a phone screen, each image will be tiny — and the hover text will be unreadable. Responsive settings let you show fewer columns on smaller screens so images are always a comfortable, viewable size.
Understanding Breakpoints
The plugin uses standard CSS breakpoints to define “screen sizes”:
- Desktop — Screens wider than 992px (laptops, monitors)
- Tablet — Screens 768px–992px (iPads, small laptops)
- Mobile — Screens below 768px (smartphones)
You can set different column counts and sizing for each breakpoint independently.
Setting Responsive Columns
The most important responsive setting is the number of columns per row. In the layout settings of your hover effect, look for column count options for each device size.
Recommended starting points:
| Effect Type | Desktop | Tablet | Mobile |
|---|---|---|---|
| Portfolio gallery | 3–4 columns | 2 columns | 1–2 columns |
| Product gallery | 3–4 columns | 2–3 columns | 2 columns |
| Team grid | 4 columns | 2–3 columns | 2 columns |
| Flip box cards | 3 columns | 2 columns | 1 column |
| Featured items | 2 columns | 2 columns | 1 column |
| Widget sidebar | 1–2 columns | 1 column | 1 column |
Image Width & Height
You can set image dimensions in pixels or as a percentage of the container width:
- Fixed pixels (px) — Good for uniform grids where you want exact control. Risk: images may overflow on small screens if set too wide.
- Percentage (%) — Flexible and responsive by nature. An image set to 100% width always fills its column. Recommended for most use cases.
For height, common approaches include:
- Fixed height (e.g., 250px) — All images the same height, images crop to fit. Great for consistent grids but images may be cropped unexpectedly.
- Auto — Height adjusts based on the image’s natural aspect ratio. Gives uneven grid heights but shows full images without cropping.
Spacing Between Images
Padding and margin settings control the gap between images in your gallery:
- Padding — Space inside each image container (adds space around the image itself)
- Margin — Space between image containers (the “gutter” between images)
A margin/gap of 10px–20px is standard for most gallery layouts. Reduce to 5px for a tighter, grid-style look. Use 0 for images that touch edge-to-edge.
Responsive Typography (Pro)
In the Pro version, you can set different font sizes for each device size. This prevents heading text that’s 24px on desktop from appearing oversized on a 320px phone screen.
Recommended mobile font sizes:
- Heading: 14px–18px on mobile (vs 20px–28px on desktop)
- Description: 12px–14px on mobile
How to Test Your Responsive Layout
Method 1: Browser DevTools
- Open your page in Chrome or Firefox.
- Right-click → Inspect (or press F12).
- Click the device toggle icon (phone/tablet icon in toolbar).
- Select different device presets (iPhone, iPad, etc.) to preview your layout.
Method 2: Resize Browser Window
Simply drag your browser window narrower. Your layout should reflow automatically as it crosses each breakpoint.
Method 3: Real Device Testing
View the live page on your actual phone. Nothing beats testing on a real device.
Common Responsive Issues & Fixes
- Images overflow the screen horizontally — Check that image width is set to 100% or a percentage, not a fixed pixel value wider than the screen.
- Too many columns on mobile — Reduce the mobile column count to 1 or 2 in responsive settings.
- Text too large on small screens — Use responsive typography (Pro) to set smaller font sizes for mobile.
- Hover text not visible on small screens — On mobile, if text overflows the image, shorten your title/description or increase the image height setting.
- Carousel shows too many slides on mobile — Set the mobile slides-per-view to 1 in carousel settings.