Grid size by number of products on collection page

Store Design
1

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.

1_shpfy.jpg
1_shpfy.jpg1561×477 70 KB

2_shpfy.jpg
2_shpfy.jpg1533×639 71.2 KB

3_shpfy.jpg
3_shpfy.jpg1561×651 25 KB

2

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

3

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.

1_shpfy.jpg
1_shpfy.jpg1561×477 70 KB

4

I’m waiting for your help

51.jpg
51.jpg1641×795 71.6 KB

52.jpg
52.jpg1565×534 103 KB

5

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.

6

Hi,

My Store : https://oceanhometextile.de/

Password : weisha

7

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.

8

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.