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
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024