I’m looking to customize the collage part to achieve a layout similar to what’s shown in the attached screenshot from the Dr. Squatch website. Specifically, I’m interested in the spacing and padding between images in the “Best Sellers”, “Bar Soaps”, “Deodorant”, and “Boosters” sections.
- Spacing Between Images: How can I add consistent padding between product images to mimic the clean, spaced layout seen in the screenshot?
- Overall Layout: Additionally, I’d like to ensure that the overall layout including headings, text alignment, matches the aesthetics of Dr. Squatch.
https://5fe303-4.myshopify.com/
pw: eumpoh
Hey @grantc00 you can achieve that by the theme settings or editing the theme code, if you are going ahead, remember of doing it in an copy of the theme and preview your changes before publishing it
From the theme settings > Layout > Horizontal space setting
Note that this will affect other collages or or grids sections you already have
If by code (not recommended at all)
On the theme files you will find one called collage.css, there you can edit these classes:
For the spacing find this in the code and change this:
@media screen and (min-width: 750px) {
.collage {
grid-auto-flow: column;
grid-column-gap: 45px; /* this one */
grid-row-gap: 20px; /* this one */
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
You can change the column and row gap
For the text over the images find this class .collage__item .card__content and add this:
.collage__item .card__content {
flex-grow: initial;
position: absolute; /* add this */
bottom: 5%; /* add this */
left: 5%; /* add this */
}
I want to adjust the image margins within the “Multimedia Collage” section so that they align with the “Feature Collections” section, as illustrated in the attached screenshot. Specifically, I’m looking to even out the margins on the left and right sides of the images in the “Multimedia Collage” to match the spacing seen in the “Feature Collections.”
