Home page categories card empty space in desktop view

Hello.

If you need display only 5 subcats on the home page, you can add the next CSS code:

.home [data-content="subcats"] a:nth-child(n+6) {
  display: none !important;
}

In the site dashboard:

• Go to the page ‘Appearance’->’Customize’;
• Click ‘Additional CSS’
• Add CSS code
• Click ‘Published’

No, I am saying that there is empty space in between cards in desktop view and i want to automatically adjust cards so that there is no empty spaces between cards and it looks responsive.

Have a look in desktop view here: https://progiez.com

Can you send the screenshot what do you want to do that I can understand your problem better?

Thanks for response @wpcalc

Here is Screenshot what I actually want: https://drive.google.com/file/d/1B5I3EEyCl6BM2-c4ZpJtTQ3AasLGfEXM/view?usp=sharing

Currently it is like this: https://drive.google.com/file/d/1WG3krRr2ATzSOfkU9y6LnRmBDoDqmqxr/view?usp=sharing or See on homepage website https://progiez.com/

I want that panel automatically adjust just below to one another according to content on homepage

You can try to use the next CSS code:

.home .main .columns {
column-width: 20rem;
column-gap: 2rem;
display: block !important;
margin-top: -2rem !important;
}

.home .main .column {
width: 100% !important;
}

.home .main .column:not(:first-child) {
  break-inside: avoid;
}

Yes it is working but after applying this CSS the panel is adjusted in vertical hierarchy like this is my custom category or panel order: 1,2,3,4,5,6,7,8,9

So previously the categor was shown in this format 1 2 3 . 4 5 6 . 7 8 9

but after applying new CSS it is shown in this format 1 4 7 . 2 5 8 . 3 6 9

so due to this in mobile view 4th panel is shown instead of 2nd and it is confusing users about content visibility.