Examples → Padding for Galleries

You can control the gallery padding with the display.galleryPadding option.

This value should be a positive integer that is 1/2 your desired gutter width.

For example, if you want a 10px gutter between your outfit collage images, use the value 5.

The default value is 2.

          var opts = {
  api: {
    total: 9, // for a non-carousel gallery @ desktop size, set to rows x cols
    tags: 'newarrivals_gallery'
  },
  display: {
    carouselWrap: false,
    cols: 3,
    rows: 3  // resets to 1 row, with carousel swipe nav, on mobile
    outfitBg: "transparent",
    galleryPadding: 5  // Increases gallery padding between outfit collages. Value is pixels. Default is 2.
  }
};
       

The following css rules may be relevant to customizing your implementation.

         // If you have a white background for the target div, this first style rule isn't needed.
// (it is not actually applied on this page, since we already have a white bg)

.stylitics-widget-outfits-container {
  padding-bottom: 4px;
  padding-right: 4px;
}


// Follwing is not required, just matching the overlay color a bit with the #efefef bg of the outfit divs

.stylitics-widget-items-container {
  background: rgba(245,245,245,0.96);
}
       

Finally, note also that the widget should be configured to have the following in its display options:

          outfitBg: "transparent"