Wix Pro Gallery: About Responsive Layouts in the Wix Editor
Your Wix Pro Gallery behaves responsively in the Wix Editor when you choose certain layouts and set it to Full Width. This means that the position of your gallery items and their size may change when the browser window is resized across all devices.Note:While the Pro Gallery attempts to adapt and respond to all screen sizes, it is not yet fully responsive across all screen sizes / resolutions. If you are looking for complete responsiveness, we recommend trying the Studio Editor.In this article, learn more about:
Responsiveness in Custom layouts Responsiveness in Preset layouts Frequently asked questions (FAQs)Responsiveness in custom layoutsThe Wix Pro Gallery offers a variety of customizable layouts. Each layout behaves differently when set to Full Width and viewed on different screen / browser / frame sizes. Click a layout below to learn how it behaves across varying screen sizes:CollageYou 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.MasonryYou 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).GridYou 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. ThumbnailsThumbnails 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.SliderThe 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. SlideshowThe 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.StripGallery items resize automatically to fit the screen / browser / frame.ColumnThe size and position of gallery items never change.Bricks / Alternate / MixThe 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.MagicThis 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.Responsiveness in preset layoutsSince Preset layouts are non-customizable, the size and / or position of gallery items may change in different screen / browser / frame sizes. The number of gallery items in the gallery, and an item's original dimensions, may further affect their size and position.Tip:Learn more about choosing Preset layouts.FAQsClick a question below to learn more about responsiveness in Pro Gallery layouts:How can I make sure my gallery items don't change the order I set in the Organize Your Gallery window?You have two options:
Choose the Masonry or Grid layout with vertical orientation. Then select the number of gallery items to display per row.  Disable Full Width for your gallery.I have chosen the Masonry layout and the order of my gallery items has changed. Why?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.