How can I make collection list images and banner smaller on my shop page?

Rcard · ‎02-05-2024

I was wondering if anyone had a code to make my collection list images and banner smaller on the shop page. I’ll attach a photo of what it looks like now.

ThePrimeWeb · ‎02-05-2024

Hey @Rcard,

Replace the code with this

<style>
@media only screen and (max-width: 989px) {
    .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
        width: 100px !important;
        min-width: 10% !important;
    }    
}

.slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
    margin-top: 50px !important;
}  
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-05-2024

Hey @Rcard,

Could you provide the link to your store?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Rcard · ‎02-05-2024

https://pawprosupply.com/collections/frontpage

ThePrimeWeb · ‎02-05-2024

Hey @Rcard,

This should work for you 😊

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 989px) {
    .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
        width: 200px !important;
    }    
}

.slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
    margin-top: 50px !important;
}  
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Rcard · ‎02-05-2024

the images are still large. i want them very small

ThePrimeWeb · ‎02-05-2024

Hey @Rcard,

Replace the code with this

<style>
@media only screen and (max-width: 989px) {
    .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
        width: 100px !important;
        min-width: 10% !important;
    }    
}

.slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
    margin-top: 50px !important;
}  
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

PageFly-Theodor · ‎02-06-2024

Hi @Rcard

This is Theodore from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media only screen and (max-width: 900px) {
    .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
        width: 100px !important;
        max-width: 100% !important;
    }    
}
</style>

Hope this can help you solve the issue

Best regards,

Theodore | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

How can I make collection list images and banner smaller on my shop page?