I’m trying to lessen the space in between the multicolumn columns for mobile devices. I want to keep the swipe feature as well.
Issue attached below
Store link-https://b01a38-40.myshopify.com/
Code- dapolu
Topic summary
Goal: Reduce excessive spacing between Multicolumn columns on mobile in the Dawn theme while keeping swipe/scroll behavior.
Context: OP provided a store preview, access code, and an image showing the wide gaps. Images illustrating the fix and outcome were also shared.
Proposed fix:
- Edit Assets > base.css (or theme.css).
- Add a mobile media query (max-width: 749px) that sets .grid–peek .grid__item { min-width: 27% !important; }.
- This narrows each card’s width on small screens, reducing the gaps while preserving the horizontal swipe.
Notes:
- The solution relies on a mobile breakpoint and adjusting item min-width to control spacing in the carousel/grid layout.
- Attachments/screenshots are central, showing before/after spacing results.
Status: A solution was proposed with implementation steps and expected outcome. No confirmation from the original poster yet; resolution unconfirmed.
1 Like
- Here is the solution for you @IllIlIl1
- Please follow these steps:
- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
@media screen and (max-width: 749px) {
.grid--peek .grid__item {
min-width: 27% !important;
}
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like