Shopify themes, liquid, logos, and UX
Hi, I have changed the image size of the collection list but now the space in the left is more than the right i want it in center (mobile only) and the space between 2 images 5px and vertical 7 px how can I do it (for mobile only)
Thanks in advance : )
Solved! Go to the solution
This is an accepted solution.
- Here is the solution for you @NOT1
- Please follow these steps:
- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.
<style>
@media screen and (max-width: 480px) {
.collection-list .card__inner {
width: 100% !important;
}
}
</style>
- Here is the result you will achieve:
- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an accepted solution.
<style>
@media screen and (max-width: 480px) {
.collection-list .card__inner {
width: 100% !important;
}
.collection-list.grid {
column-gap: 15px !important;
row-gap: 20px !important;
}
.grid--2-col-tablet-down .grid__item {
width: calc(49% - var(--grid-mobile-horizontal-spacing) / 2) !important;
}
}
</style>
Can you replace to this code @NOT1
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an accepted solution.
- Here is the solution for you @NOT1
- Please follow these steps:
- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.
<style>
@media screen and (max-width: 480px) {
.collection-list .card__inner {
width: 100% !important;
}
}
</style>
- Here is the result you will achieve:
- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Hey thanks a lot. I have another issue and the space between 2 images 5px and vertical 7 px how can I do it (for mobile only)
Do you want like this @NOT1 ?
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Yes but I want a little bit more vertical and horizontal space
Do you want like this?
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an accepted solution.
<style>
@media screen and (max-width: 480px) {
.collection-list .card__inner {
width: 100% !important;
}
.collection-list.grid {
column-gap: 15px !important;
row-gap: 20px !important;
}
.grid--2-col-tablet-down .grid__item {
width: calc(49% - var(--grid-mobile-horizontal-spacing) / 2) !important;
}
}
</style>
Can you replace to this code @NOT1
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Thank you 😍
Glad to help you. Have a good day.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We 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, 2024