Remove Empty Space

Store Design
, , , ,
1

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

ArnauP_0-1724498943472.png
ArnauP_0-1724498943472.png1906×916 77.7 KB

2

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:

BSSCommerceB2B_0-1724500028413.png
BSSCommerceB2B_0-1724500028413.png400×195 26.3 KB

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:

BSSCommerceB2B_1-1724500281177.png
BSSCommerceB2B_1-1724500281177.png1897×957 119 KB

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!

3

It works, but in mobile sees like this:

IMG_20240824_135618.jpg
IMG_20240824_135618.jpg1080×1972 55.1 KB

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

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liqid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
  • Here is the result you will achieve:

BSSTekLabs_0-1724504584463.png
BSSTekLabs_0-1724504584463.png377×817 41.2 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
5

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.

:heart_eyes: It’s such my honor to help you, bro.