Change product image frame on collection page

Hey everyone,

for my Debut Theme on Mobile, I want to narrow down the space inbetween the products on my collection page (so they nearly touch eachother) & also make them take up full screen width.
site: www.backyardarchive.eu

Thanks in Advance!

Hello @miguel_by

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ div#shopify-section-list-collections-template .page-width { padding-left: unset !important; padding-right: unset !important; } #shopify-section-list-collections-template li.grid__item.small--one-half.medium-up--one-third { padding-left: unset !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

I can’t see any changes, what could be the issue?