Collection list customization

[NOT1]

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

[BSS-TekLabs · 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.

[BSS-TekLabs · 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.

[NOT1]

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]

Do you want like this @NOT1 ?

[NOT1]

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

[BSS-TekLabs]

Do you want like this?

[BSS-TekLabs · 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 

[NOT1]

Thank you 😍

[BSS-TekLabs]

Glad to help you. Have a good day.