Fix spacing for Gallery Carosels

Store Design
, , , , , , , , ,

Topic summary

A user reported alignment issues with a gallery carousel on their Shopify store (vazluxe.com). The carousel spacing didn’t match the rest of the page layout on desktop, and the homepage displayed a loading glitch where images initially appeared as one large image before transitioning to three separate images.

Solution provided:

  • Remove existing commented-out CSS code from the section
  • Add new CSS to the section’s “Custom CSS” setting:
    • Set .gallery-carousel__item to flex-grow: 1 with no right margin
    • Apply gap: 10px to .gallery-carousel__items

Status: Resolved. The user confirmed the fix worked successfully.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

The gallery carosel spacing doesn’t line up with the rest of the website. Can we fix so its the same size as rest page. on desktop, my site is https://vazluxe.com

also, when loading homepage it blinks as 1 huge image first then goes to 3. Can we fix this please

fix spacing.png
fix spacing.png2103×1297 246 KB

2

You have this code (at the bottom of the section code?):

main section:first-child .gallery-carousel__items > div {
	/* margin-right: 10px !important; */
}

This should be removed and instead, add this code to the sections “Custom CSS” setting:

.gallery-carousel__item {
  flex-grow: 1;
  margin-right: 0 !important;
}

.gallery-carousel__items {
  gap: 10px;
}
1 Like
3

You’re amazing!! thanks so much.