Solved

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

Rcard
Tourist
4 0 1

 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. 

IMG_2631.png

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2077 596 466

This is an accepted solution.

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

Replies 6 (6)

ThePrimeWeb
Shopify Partner
2077 596 466

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!
ThePrimeWeb
Shopify Partner
2077 596 466

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.

ThePrimeWeb_0-1707150648406.jpeg

 

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
Tourist
4 0 1

the images are still large. i want them very small

ThePrimeWeb
Shopify Partner
2077 596 466

This is an accepted solution.

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
Globetrotter
576 75 88

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.