Set the number of tables per row (Grid layout)

CSS Codes Pricing Table
1

Add this code to the Custom CSS field on the Appearance tab of your Pricing Table widget’s settings:

.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:

image
image600×157 10.3 KB

1 Like
2

how can I apply this CSS to desktop, but not to mobile?

1 Like
3

Hey there and welcome to the Community, @user22311 :wave:

You just should wrap this code in this media tag @media (max-width: 500px) :slight_smile:

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

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

so.. pretend I’m an idiot haha I don’t know anything about code at ALL.. I know how to copy and paste CSS, that’s about it. no idea what “wrapping code in media tags” means. Is there any way to have 3 columns on desktop, and 2 columns on mobile using css only? Thanks!

2 Likes
5

Hi @user22311 :wave:

Apologies for the confusion!

The code I’ve shared in the previous message will set 3 columns on desktop.

And this code will help you add 2 columns on mobile:

@media (max-width: 500px) {
.es-layout-grid-container {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
}

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