---
title: "Responsive behaviour"
date: 2026-09-06
author: "nK"
---

# Responsive behaviour

Galleries built with the Visual Portfolio block adapt to the screen width using five breakpoints:

NameWidthExtra Small320 pxSmall576 pxMedium768 pxLarge992 pxExtra Large1200 pxPro users can change them in **[Settings → General](https://www.visualportfolio.com/docs/settings/general/) → Responsive Breakpoints**. The values must stay in ascending order; the fields enforce it.

## What the breakpoints control

FeatureRuleMasonry, Grid and Tiles columnsOne 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 pxSlider slides per view and thumbnails per viewThe same ladder, counting down from the number you setJustifiedNot affected; the row height stays, fewer images fit per rowSkins: Move Overlay Under Image, Move Caption Under Image (Pro)The overlay or caption is rendered under the image at and below the chosen breakpointHover 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](https://www.visualportfolio.com/docs/gallery-blocks/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.