Problem with mobile pagination buttons

Hi,

I used code from this forum:

@media (min-width: 100px) {
.es-layout-comparison-table-snap-carousel {
grid-template-columns: unset;
grid-auto-columns: 200px;
}

.es-widget-container {
–head-column-width: 180px;
}

.es-layout-comparison-table-outer-table-container,
.es-layout-comparison-table-container {
grid-auto-columns: calc((100% - var(–head-column-width)) / 2);
grid-template-columns: var(–head-column-width);
}

.es-layout-comparison-table-snap-carousel .es-head-column-container * {
max-width: var(–head-column-width);
}

.es-snap-carousel-arrow-control-container:has(.es-snap-carousel-arrow-control-left) {
left: calc(var(–head-column-width) - 16px) !important;
}

but after that i get this problem:

and the my next question:
Is it possible to make the pricing table wider and responsive to window size? Currently, even on widescreen monitors, only a few columns are visible. It should work so that someone who opens fullscreen on a widescreen display can see all columns, while someone with a laptop sees only as many columns as fit their resolution. The table should automatically adjust its width based on the browser window size.

2 Likes

Hi there and welcome to the Community, @Grzegorz :waving_hand:

I’ve forwarded your request to the dev team and will let you know once I have any news :wink:

1 Like

Hi there, @Grzegorz :waving_hand:

Thank you for waiting!

I’ve consulted with the devs and the only option here is to make the widget full width:

On narrower screens it’s impossible to fit all columns, but with the Full Width option enabled all columns will appear right away on wide screens.

Please let me know if this explains things or if you have any questions left :slightly_smiling_face:

1 Like