Make the colums from 2 to 3 or more

[Jhon_Kwarri]

Right now it displays as 2 per row, but I’d want it to be 3 or 4 MAX per row.
Because right now I’m left with a lot of empty space!

How would I get this done ?

[Sina]

Hi @Jhon_Kwarri welcome to community

Please take a look at your width setting

[Jhon_Kwarri]

Yes I tried to change that but it’s either 1 or 2 that it shows per row.

[Jhon_Kwarri]

[Sina]

OK. and how is your setting for the pictures?
Did you add any custom CSS code?

[Sina]

@Jhon_Kwarri Would you share the link to the widget?

[Jhon_Kwarri]

Pricing table cleaning

[Sina]

@Jhon_Kwarri thank you.

I looked it up, but I couldn’t find the cause. @Max will look into it tomorrow. I don’t know if it has anything to do with the free version (which I can’t imagine).

Maybe you can make a copy of it and narrow it down. ??

Sorry!

This empty space is strange .

[Jhon_Kwarri]

Alright please let me know!

[Max]

Hi there, @Jhon_Kwarri

Please use this code in the Custom CSS field on the Appearance tab of your widget’s settings and let me know if it helped:

.es-layout-grid-container {
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
}

.es-column-grid-container {
  grid-column: unset !important;
  margin: 0 !important;
}

The number of items per row is set in the 2nd line of the code:

We also agree that it would be great to have this option as a setting, and I’ve added this idea to the Wishlist on your behalf - Option to set the number of tables per row (Grid layout)

[Sina]

Hi @Max
I’d be interested to know why it didn’t work for him with the standard widget.
The room reservation example works without any adjustments.

[Max]

The Full Width option displays all columns in 1 line. The Room Reservation table has 4 columns and all of them appear in 1 line.

In this case, there are 7 columns in total and the Full Width option also shows them in 1 line:

However, since Jhon wants to display only 3-4 events per row, the only solution is to use the CSS code

[Jhon_Kwarri]

What CSS code should I use for this then ? I’m not a big brain on this and knowing how to solve it?

[Sina]

Hi @Jhon_Kwarri

for 7 columns in total and the Full Width option also shows them in 1 line

.es-layout-grid-container {
  grid-template-columns: repeat(7, 1fr);
  column-gap: 20px;
}

.es-column-grid-container {
  grid-column: unset !important;
  margin: 0 !important;
}

[Max]

Hi there, @Jhon_Kwarri

Yep, if you want to display 7 columns in 1 line like in the screenshot above, you should use the Full Width option.

With the code Sina shared, 7 columns will also be displayed in 1 line, but they’ll look a bit different: