Wix Pro Gallery: About Responsive Layouts in the Wix Editor

You can display your Pro Gallery with a Collage layout and choose a horizontal or vertical scroll direction. Learn what happens to your gallery per scroll direction:

• Horizontal: The position of gallery items in a gallery with a horizontal scroll direction and a horizontal orientation won’t change. However, gallery item size may change depending on the settings applied to your gallery and the size of the screen / browser / frame.

• Vertical: The size of gallery items and their position relative to other items in a row change in galleries with a vertical scroll direction with either a horizontal or vertical orientation. How much gallery items change, relative to each row, varies depending on the original dimensions of the gallery item and the settings you apply. In some cases, gallery items move to another row, due to a lack of space within the gallery itself.

You can display your gallery with a Masonry layout and choose a horizontal or vertical orientation. Learn what happens to your gallery per gallery orientation:

• Horizontal: Both the image size and the row the image is on change depending on the size of the screen / frame / gallery items. This is further affected by the thumbnail size and spacing you have previously set (meaning the staggered layout between gallery items may be reduced and items may be lined up similarly to the grid gallery layout).

• Vertical: The position of gallery items within the rows doesn't change, but the size of the item does. As there is a fixed number of items per row, the gallery items will stop being responsive if the window is smaller than the space needed to display all items, and a scrollbar appears. If you place gallery text above or below the item, this will further impact item sizes (meaning the staggered layout between gallery items may be reduced and items may be lined up similarly to the grid gallery layout).

You can display your Pro Gallery with a Grid layout in a horizontal or vertical scroll direction. Learn what happens to your gallery per scroll direction:

• Vertical: Gallery items keep their position within their row, but change size depending on the screen / browser / frame size. After a certain point, the images will not reduce in size to fit the frame, and a horizontal scrollbar will appear. This is further affected by any text you add above / below the gallery item, and the size of the text box.

• Horizontal: Single row gallery items don't change size or position, but if the frame is too small, a scrollbar appears.

Thumbnails always keep their size and positioning. Learn what happens to the main gallery item when it is set to:

• Crop: The main gallery item resizes depending on the screen / window / browser dimensions.

• Fit: It doesn't resize regardless of the screen /window / browser size.

The image ratio you choose in the Slider layout determines how the gallery resizes on different screens. Learn what happens when the image ratio is set to:

• Responsive: Gallery items resize depending on the space available to display in the browser / screen / frame.

• Fixed: Gallery items don't resize, regardless of the screen / window / browser size, or the settings applied to the layout.

The Thumbnail resize setting you choose in the Slideshow layout determines how the gallery resizes on different screens. Learn what happens when the Thumbnail resize is set to:

• Crop: The size and ratio of the gallery item can change significantly depending on the available frame to display the gallery.

• Fit: The gallery item's ratio stays the same, but resizes in different screen / browser / frame sizes. This change is not always obvious as the resizing is subtle, however, it may be more noticeable if the screen size is drastically different.

Gallery items resize automatically to fit the screen / browser / frame.

The size and position of gallery items never change.

The position of gallery items within each row and their placement relative to the other items in your gallery doesn’t change. The gallery items, however, resize significantly in different browser / screen / frame sizes.

This gallery layout is randomized. In most cases, gallery items resize to varying degrees, but largely stay in the same position. In some cases, a gallery item may move to another row if there is not enough space.

You have two options:

1. Choose the Masonry or Grid layout with vertical orientation. Then select the number of gallery items to display per row.

2. Disable Full Width for your gallery.

The Masonry layout may automatically change the order of your gallery items. This is to best fit the items within the gallery space available on a device (tablet, phone, desktop etc.).

If you find your gallery has some blank spaces, you can fix this by increasing the gallery height, thumbnail size, or by adding more gallery items.

Learn more about adding and customizing the Pro Gallery in the Studio Editor.