Blog

To make the Atlanta design have a slider that is responsive do the following steps:

1. in the home layout, remove the fullscreen background component.

2. Add the video as a slide, set the video to autoplay and loop.

3. Add the following CSS to the custom.css file

4. Click on Advance Editor

5. Click on Assets

6. Click on the folder "Client"

7.  Click on the folder "CSS"

8. Open custom.css

9. Copy and paste the code below.

/*-----------------------slider video changes--------------------------*/
.wrap__slider.text-only .bx-wrapper .wrap__bx-controls,
.wrap__slider .vjs-control-bar,
.wrap__slider button.vjs-big-play-button,
.wrap__slider button.vjs-big-play-button {
  display: none !important;
}
.wrap__slider .slider__video video {
  pointer-events: none !important;
}
.wrap__slider.text-only,
.wrap__slider .bx-wrapper .bx-viewport,
.wrap__slider .slider__item,
.wrap__slider .slider__image--wrap,
.wrap__slider .slider {
  min-height: calc((720vw / 1280) * 100) !important;
  max-height: calc((720vw / 1280) * 100) !important;
  height: calc((720vw / 1280) * 100) !important;
  width: 100vw !important;
}
.wrap__slider.text-only .wrap__slider--inner {
  max-width: 100%;
  top: 0;
}
.wrap__slider .slider__text {
  max-width: 100%;
}
@media (max-width: 1024px) {
  .wrap__slider.text-only .slider__text {
    top: 80%;
    padding: 0;
  }
}
@media (max-width: 767px) {
  .wrap__logoHeader {
    float: none;
    margin-bottom: 54px;
    position: relative;
  }
  .wrap__slider.text-only .slider__text {
    top: 50%;
  }
} /*-----------------------end slider video changes--------------------------*/

10. Click on "Save" on the orange bar

11. Close Tab