Hey,
I am looking to remove the space between the images. Essentially, having all the photo’s touching.
Link: https://wholesomeboy.co/pages/lookbook
Thanks!
Topic summary
A user seeks to remove spacing between images in a multi-column layout on their Shopify store using the Dawn 8.0 theme, wanting photos to touch each other without gaps.
Multiple CSS Solutions Provided:
- Target the
.multicolumn-listclass and setcolumn-gapandrow-gapto0 !important - Modify the
base.cssfile in the theme’s Assets folder - Use specific selectors like
ul#Slider-template--[ID]or.gridclass - One solution includes a media query for screens wider than 750px
Implementation Steps:
- Navigate to Online Store > Themes > Edit code
- Open Assets > base.css
- Add the CSS code at the bottom of the file
- Save changes
Several community members offered similar approaches with slight variations in selectors and specificity. Screenshots were shared showing successful results, though the discussion remains open without confirmation from the original poster about which solution worked.
Hi @WholesomeBoy , you can do that by adding this CSS code below in Online store > Themes > Edit code > Assets > base.css
.multicolumn-list {
column-gap: 0 !important;
row-gap: 0 !important;;
}
Here is the result
1 Like
Hi @WholesomeBoy,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
ul#Slider-template--16072400961706__dfe7dbbd-40aa-418b-b742-8859a36c6d02 {
gap: 0 !important;
}
Hope my solution works perfectly for you!
Best regards,
Victor | PageFly
1 Like
Hello @WholesomeBoy
Try this code if you find it helpful:
Go to Online Store >Theme>Edit code>Assets>base.css>add code at the bottom
ul#Slider-template--16072400961706__dfe7dbbd-40aa-418b-b742-8859a36c6d02 .grid {
column-gap: 0 !important;
row-gap: 0 !important;
}
2 Likes
@WholesomeBoy
add below css into base.css at the end of the page
@media screen and (min-width: 750px)
{
.grid {
column-gap: 0px !important;
row-gap: 0px !important;
}
}
1 Like