How can I resize collection images for desktop view?

Technical Q&A
1

Hi everyone,

I duplicated and edited my collection template so that my Events page would only show one event (product) per row, but now the images are HUGE! Is there a way to shrink them a bit, maybe to about 80% of the size shown, and still only display one product per row?

Here is the page for reference: https://tipsyhues.com/collections/public-events

I looks fine on mobile, just need to resize for desktop.

Thanks!

2

@Anonymous , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > styles.css and paste this at the bottom of the file:
@media (min-width: 749px){
    .collection-events .product-list{
    max-width: 500px !important;
    
    width: 100% !important;
    margin: 0 auto !important;
}
}

You can change the width to anything you wish, just change the 500px value. This will not affect mobile devices.

Kind regards,
Diego

2 Likes
3

It worked, thank you so much!!!