Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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>
Hey @Rcard,
Could you provide the link to your store?
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.
the images are still large. i want them very small
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>
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024