Hi there,
I would like to show 1 less product on our featured collection section on mobile, so it’s an even number. So keep 5 on desktop but show only 4 on mobile.
How can I best achieve this?
Thanks!
password: chaos
Topic summary
A user wants to display 4 products instead of 5 in their featured collection section on mobile devices to achieve an even number, while keeping 5 products visible on desktop.
Solution Provided:
Multiple respondents suggested the same CSS approach:
- Add custom CSS to the
base.bundle.cssfile - Use a media query targeting screens up to 747px width
- Hide the last product using
display: noneon the specific section
Resolution:
The issue was resolved. The original poster modified the suggested code by removing the section-specific ID (#shopify-section-template--24072017936666__) and instead applied the CSS directly within the theme editor, which worked successfully.
Screenshots were provided showing the current 5-product mobile layout that needed adjustment.
@INFRA Try this CSS
@media (max-width:747px) {
#shopify-section-template–24072017936666__featured-collection .list-none.in-view:last-child {
display: none;
}
}
1 Like
Hi Infra
- Go to Edit code → Find this file " base.bundle.css " → Add this code at the end
@media (max-width: 747px) {
#shopify-section-template–24072017936666__featured-collection .list-none.in-view:last-child {
display: none;
}
}
Best,
Esther
Hi Infra
- Go to Edit code → Find this file " base.bundle.css " → Add this code at the end
@media (max-width: 747px) {
#shopify-section-template–24072017936666__featured-collection .list-none.in-view:last-child {
display: none;
}
}
Best,
Esther
Thank you!
I left out “#shopify-section-template–24072017936666__” and added it to the section in the editor instead and that worked perfectly!