Hi,
I desire to make the collection card a bit smaller on mobile
20% smaller approximately.
Is there a way please ?
Topic summary
A user wants to reduce the size of collection cards on mobile by approximately 20%.
Another participant provided a CSS solution using a media query targeting screens under 749px width, adding padding-inline: 40px to the collection list section. They shared a screenshot showing the expected result.
The original poster reported the code didn’t work and shared their implementation in the custom CSS section. However, the helper noted that the suggested code (padding-inline: 40px) wasn’t actually present in the custom CSS—only row-gap: 10px appeared, indicating the code may not have been properly added or saved.
Status: Unresolved. The issue appears to be incorrect implementation of the provided CSS code rather than the solution itself being ineffective.
Hi @Artez
let try to add this custom css code:
@media screen and (max-width: 749px) {
#shopify-section-template--18541339115701__collection_list_TJVYQQ.section-collection-list .collection-list:not(.slider) {
padding-inline: 40px;
}
}
did not work yet, maybe it is because I changed a bit the page order?
where did you add this code? I don’t see you added on storefront
