Goal: Make collection icons smaller on mobile by displaying them in 2–3 columns.
Context: Desktop layout looks fine; on mobile, icons appear too large/single-column. Screenshots were shared, so images are central to understanding the layout issue.
Proposed fix: A helper noted it already appeared in two columns on their device, but provided a CSS media query to force three columns on mobile. Location: assets/section-collection-lists.css. Rule: for screens under 749px, set .collection-list .collection-list__item width to calc(33% - 3rem) (responsive CSS rule to create a 3-column grid).
Implementation: The code was added as instructed.
Latest result: Most items display in columns, but the final section shows two icons appearing larger with an uneven gap between items, indicating inconsistent sizing/spacing on the last row.
Status: Unresolved. Further CSS adjustments or clarification are needed to correct the last-row sizing and spacing. No final solution or decision yet.
Hi everyone,
I have change the photos of my collections, it appears fine in desktop view, but the problem is the responsiveness when it comes to mobile. I want to separate the icons into 2 or 3 columns and make it look smaller.
Site URL: thecleanroom.net
See photo for reference:
This is the desktop view
and
this is the mobile view:
Hi @IntechCarl ,
I can see it is already in two columns on Mobile devices , Let me know if that is fixed . Else below is the highlighted code that would help fix it
Hi!
I would like to consider your request, but I can’t see on the screen shot you provide the whole code after .collection-list section-col…list.css:54. May I have the code be written here in reply? And also where do I have to put the codes?
Hi @IntechCarl ,
You can find the file in aseets folder of your theme , file named Section-collection-lists.css
@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
width: calc(33% - 3rem);
}
}
