Re: Collection list customization

Solved

Collection list customization

NOT1
Shopify Partner
272 2 117

NOT1_0-1725977734324.png

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 : ) 

Accepted Solutions (2)

BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

- Here is the solution for you @NOT1 
- Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg

- 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:

BSSTekLabs_0-1725978138485.png

 

- 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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

BSS-TekLabs
Shopify Partner
2350 688 806

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 8 (8)

BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

- Here is the solution for you @NOT1 
- Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg

- 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:

BSSTekLabs_0-1725978138485.png

 

- 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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
NOT1
Shopify Partner
272 2 117

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) 

BSS-TekLabs
Shopify Partner
2350 688 806

BSSTekLabs_0-1725978520431.png

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
NOT1
Shopify Partner
272 2 117

Yes but I want a little bit more vertical and horizontal space

BSS-TekLabs
Shopify Partner
2350 688 806

BSSTekLabs_0-1725978943803.png

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 688 806

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
NOT1
Shopify Partner
272 2 117

Thank you 😍

BSS-TekLabs
Shopify Partner
2350 688 806

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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now