Editing # of images/row in gravityview gv-gallery class

Get Help
,
1

I have a multi image item in my form and I’m allowing 4 images to be uploaded. In gravityview I setup View Type : Layout Builder and entered gv-gallery as the custom CSS class. The front end displays only a row of (3) images no matter how small I set the custom width value. Is there a way to set the number of images/row?

2

Hi Thomas,

The gv-gallery class sets each image to max-width: 200px by default, which typically results in 3 images per row depending on your container width.

To display 4 images per row, you’ll need to add custom CSS to reduce the image width.

Add this to your theme’s custom CSS (Appearance > Customize > Additional CSS) or a custom CSS plugin:

.gv-gallery .gv-field-file-uploads li {
    max-width: 150px; /* Adjust this value as needed */
}

You may need to experiment with the value - try 150px, 140px, or even smaller depending on your layout width. The exact value will depend on your theme’s container width and desired spacing.

Alternatively, if you want more precise control, you can use a percentage-based approach:

.gv-gallery .gv-field-file-uploads li {
    max-width: 23%; /* ~4 per row with some spacing */
    margin-right: 1%;
}

If you need additional assistance customizing this, please contact our support team at support@gravitykit.com.

Best,

1 Like
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.