Setting fixed height on horizontal feed

Ask the Community Customization
1

I have a horizontal widget with a variety of feed sources. Some feeds are taller than others, creating a visually jarring effect (+ PageSpeed Insights is dinging me for excessive CLS). In an attempt to create a fixed height equal to the tallest source, I have tried the following:

  • Wrapping widget code in <div="height:398px; max-height:100%">...</div> - did not work.
  • Setting height:398px on Background__Overlay-sc in configurator - did not work.
  • JavaScript, using element.style.height = '398px'; - did not work.

AI suggested the following, which also did not work:
.global-styles [class="Widget__Container"],
.global-styles [class*="Slider__Item"],
.global-styles [class*="Text__Container"],
.global-styles [class*="Layer__HiddenLayer-sc"] {
height: 398px !important; /* force shorter elements to take up the max height */
min-height: 398px !important; /* 398px = tallest display on desktop */
max-height: 398px !important;
}

.global-styles [class="Text__Container"] {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* OPTIONAL: prevent stretching of short text */
}

@media screen and (max-width: 768px) {
.global-styles [class="Widget__Container"],
.global-styles [class*="Slider__Item"],
.global-styles [class*="Text__Container"],
.global-styles [class*="Layer__HiddenLayer-sc"] {
height: auto !important; /* prevent clipping on mobile */
min-height: 450px !important; /* set a new baseline for vertical phone views */
max-height: none !important;
}
}

I would prefer to do this within the configurator while maintaining responsiveness. Ideas?

3

Hello @Bob_Wilson :waving_hand:

Could you please send me a link to the page where your widget is installed? I’ll be happy to take a closer look :slightly_smiling_face:

4

Devs have solved it - thanks all!

5

You’re always welcome :wink:

Here is a solution for anyone facing the same issue:

.swiper-wrapper {
  height: auto !important;
  align-items: stretch !important;
}

.swiper-slide {
  height: auto !important;
  align-self: stretch !important;
}

.es-slider-layout-item,
.es-slider-layout-item > div,
.es-slider-layout-item [class*="CardContainer-sc"] {
  height: 100% !important;
}

.es-slider-layout-item {
  min-height: 320px;
}

@media (max-width: 900px) {
  .es-slider-layout-item {
    min-height: 600px;
  }
}

@media (max-width: 530px) {
  .es-slider-layout-item {
    min-height: 480px;
  }
}