How do I change the number of columns on mobile?

The Visual Portfolio block reduces columns automatically. A 3-column Masonry, Grid or Tiles gallery shows 2 columns at 768 px and below and 1 column at 576 px and below; a 5-column one shows 4 at 1200, 3 at 992, 2 at 768 and 1 at 576. Pro users can move these widths in Settings → General → Responsive Breakpoints.

To keep two columns on phones, add to the block’s Custom CSS:

@media screen and (max-width: 576px) {
	selector .vp-portfolio__item-wrap {
		width: 50% !important;
	}
}

Justified and Slider have no column width to override. Slider steps down its slides per view the same way.

See Custom CSS. The full column ladder is on Responsive behaviour.

Was this page helpful?