Grid size by number of products on collection page

[Okyns]

Hi!

I am using the Craft theme. There is no problem if the number of products is 4 or more on the collection pages. However, the dimensions of the product field change depending on whether it is 3.2 or 1. When I look at the base.css file, I see that settings such as grid--4-col , grid--3-col , grid--2-col have been made. When making changes to these, the slide show and multi-column areas on the main page are broken. I'm waiting for your help.

[AvadaCommerce · Accepted solution]

Hi @Okyns ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

@screen (min-width: 990px) {
    #ProductGridContainer #product-grid .grid__item {
        max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[AvadaCommerce]

Hi @Okyns ,

Can you clearly note the part you want so we can help you? Do you mean that on the collection page, the grid card will show 4 columns in 1 row?

Thanks

[Okyns]

Hi
If there are 4 products in a category, it shows 4 products in a row and everything is fine. But if the number of products is 3 or 2, the image sizes change. I want the image sizes to not change even if the number of products is less than four.

What I want to see are 4 products in 1 line and as below.

[Okyns]

I'm waiting for your help

[AvadaCommerce]

Hi @Okyns ,

sorry for the slow response

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

[Okyns]

Hi,

My Store :  https://oceanhometextile.de/

Password : weisha

[AvadaCommerce · Accepted solution]

Hi @Okyns ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

@screen (min-width: 990px) {
    #ProductGridContainer #product-grid .grid__item {
        max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[Okyns · Accepted solution]

Thank you so much .

I changed it with a little touch as follows.

@media screen and (min-width: 990px) {
#ProductGridContainer #product-grid .grid__item {
max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
     }
}

I'm marking it as a solution.