Can't get css column width parameter to work

[user26116]

I’ve used the CSS found on this forum and the website and cannot get the column width to stick. The. header width CSS I’ve found works perfectly.

https://prizefest.com/passes

[Max]

Hi there, @user26116 and welcome aboard

You can control the width of the columns using the Width setting on the Appearance tab. Does this option work for your case?

[user26116]

This changes the width of the whole table. I want the columns to be smaller so that I can fit the whole table on a page. Here is a Photoshop mockup of the change I want to make:

[Max]

Ah, got it!

I’ve double-checked your widget, and it seems you’ve already found a solution:

Could you please confirm if everything is fine now?

[user26116]

It gets me most of the way there. Thanks for confirming, but now there’s an issue where the mobile break width is too small, so the columns end up looking like this before the responsive breaks to mobile view. Can I change when the mobile view kicks in?

[Max]

You’d like to apply this CSS code only for the desktop version with the custom breakdown value, right?

If this is the case, here is the adjusted code for desktop, where you can adjust the breakdown value in the 1st line of the code:

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

Please check it out and let me know if it helped