Table of Contents
Galleries built with the Visual Portfolio block adapt to the screen width using five breakpoints:
| Name | Width |
|---|---|
| Extra Small | 320 px |
| Small | 576 px |
| Medium | 768 px |
| Large | 992 px |
| Extra Large | 1200 px |
Pro users can change them in Settings → General → Responsive Breakpoints. The values must stay in ascending order; the fields enforce it.
What the breakpoints control
| Feature | Rule |
|---|---|
| Masonry, Grid and Tiles columns | One column fewer at each breakpoint below the count you set: a 5-column gallery shows 4 at or below 1200 px, 3 at or below 992 px, 2 at or below 768 px and 1 at or below 576 px. A 3-column gallery shows 2 at or below 768 px and 1 at or below 576 px |
| Slider slides per view and thumbnails per view | The same ladder, counting down from the number you set |
| Justified | Not affected; the row height stays, fewer images fit per row |
| Skins: Move Overlay Under Image, Move Caption Under Image (Pro) | The overlay or caption is rendered under the image at and below the chosen breakpoint |
Hover effects (skins, tilt, hover media, Caption Move) need a pointer. On touch screens they do not fire; use Display: Always or Move Overlay Under Image so captions are visible.
Changing the ladder with CSS
To keep two columns on phones in a Masonry, Grid or Tiles gallery, add to the block’s Custom CSS:
@media screen and (max-width: 576px) {
selector .vp-portfolio__item-wrap {
width: 50% !important;
}
}Replace 576px with the width where your rule should start and 50% with 100 / columns. Justified and Slider have no column width to override.