Anyone know how to make the icon list from 2 in a row to 5 in a row on mobile version??
I am using empire 9.11 theme
No password
Topic summary
Request to change the Shopify Empire 9.11 mobile icon/collection list layout from 2 items per row to 5 items per row.
Proposed solution: add a CSS media query for screens ≤767px targeting the section’s .collection-list__content and set grid-template-columns to repeat(5, minmax(auto, 1fr)). The example provided used a specific section ID selector (#shopify-section-template–16970166567161__dynamic_collection_list), implying the CSS is scoped to that section.
Current status: the requester reports the CSS change had no effect and asks where exactly to place the code. They reiterated difficulty implementing it and requested a specific file or location for insertion.
Assets: screenshots were shared to illustrate the desired 5-per-row outcome and the current mobile view.
Outcome: no confirmed fix yet. Next step needed is guidance on the correct placement of the CSS (e.g., theme stylesheet or custom CSS area) and ensuring the selector matches the active section.
Like this one? See the screenshot https://postimg.cc/FdY2rNzG
@media only screen and (max-width: 767px){
#shopify-section-template–16970166567161__dynamic_collection_list .collection-list__content {
grid-template-columns: repeat(5, minmax(auto, 1fr));
}
}
1 Like
Dear Marketplace026
Thanks for getting back to me
I have Tried the code but nothing happen
is there some specific place to put this code ??
Hi, I am still having a Trouble to put This Code. any spesific Location you can suggest me ?