Custom CSS Code needed for bar slider with 3 different coloumns as results

Ask the Community Customization
1

Hey guys,

i need a custom css code for a calculator with a bar slider (in this case “number of hotel rooms”) which then multiples by 3 different per month costs ending in results caomparing basic medium full. Currently it displays the results as lines but would need the results displayed as coloumns under the bar slider.

See below - meaning the current rows analytics light and full should be displayed as coloumns.

Thanks for your help

Greenshot 2026-03-12 09.37.26
Greenshot 2026-03-12 09.37.26731×488 21.5 KB

2 Likes
2

Hi there, @Maximilian_Schmid :waving_hand:

It’s possible to achieve this, but only on desktop. For this, please add the code below to the Custom CSS section on the Settings tab of your widget’s settings:

@media (min-width: 1024px) {
  [class*='results__Container-sc'] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: max-content;
    column-gap: 40px;
  }

  [class*='widget__Layout-sc'],
  [class*='widget__Container-sc'],
  .es-widget-background-content {
    width: max-content;
  }

  .es-field-layout-container {
    width: 100%;
  }

  [class*='widget__Layout-sc'] {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
}

If you’d like to show prices under the calculation names, please add one more CSS code:

[class*='result-secondary__SecondaryContainer-sc'] {
    flex-direction: column;
  }

  [class*='animated-number__Content-sc'] {
    text-align: left;
    margin-left: 10px;
  }

Please check it out and let me know if you like the result :wink:

1 Like