Go to your online store → customize → settings → custom css and paste this code there
@media (max-width: 767px) {
.card:not(.ratio) {
width: 153px;
}
.grid {
column-gap: 38px;
}
}
Topic summary
A Shopify store owner using the Sense theme wants to make Featured Collection cards wider on mobile devices, as they currently appear too narrow compared to the desktop view.
Solution Provided:
Multiple users suggested adding custom CSS code to adjust the mobile layout:
- Navigate to: Online Store → Customize → Settings → Custom CSS
- Add media query targeting screens under 767px width
- Modify
.card:not(.ratio)and.gridproperties to adjust card width (153px) and column gap (38px)
Alternative Approach:
One user noted that the Sense theme uses a carousel by default on mobile and recommended using a single-column layout instead for better mobile presentation.
Outcome:
The original poster confirmed the CSS solution worked after some minor adjustments to the numerical values, successfully resolving the issue.
