Remove Empty Space

[ArnauP]

Hello, I have 4 products selected per row and I only get 3, how can I fix it so that it fits in its place?

https://jaccomcollection.com/collections/t-shirt

Thank you so much

[BSSCommerce-B2B · Accepted solution]

Hi @ArnauP ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

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

Step 3: Save and reload home page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[BSSCommerce-B2B · Accepted solution]

Hi @ArnauP ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

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

Step 3: Save and reload home page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[ArnauP]

It works, but in mobile sees like this:

 

[BSSCommerce-B2B]

Hi @ArnauP , 

We're happy to see that our suggestion helped you solve the issue. 

Sr about my mistake on mobile. 

You can add more css script in base.css, like below to fix this problem: 

@media screen and (max-width: 768px) {
    .grid--2-col-tablet-down .grid__item {
        width: calc(47% - var(--grid-mobile-horizontal-spacing) / 2) !important;
    }
}

Hope it helps. 

😍It's such my honor to help you, bro.

[BSS-TekLabs · Accepted solution]

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

 

- Then find the theme.liqid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

<style>
@media screen and (max-width: 749px) {
    .grid--2-col-tablet-down .grid__item {
        width: calc(47% - var(--grid-mobile-horizontal-spacing) / 2) !important;
    }
}
@media screen and (min-width: 990px) {
    .grid--4-col-desktop .grid__item {
        width: calc(23% - var(--grid-desktop-horizontal-spacing)* 3 / 4) !important;
        max-width: calc(25% - var(--grid-desktop-horizontal-spacing)* 3 / 4);
    }
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.