[Share] How to increase Banner Slideshow arrow size

To increase Banner Slideshow arrow size, you can follow these.

If CSS doesn't work, you can share link to page where you use Banner Slideshow, I will check it again.

#1. Banner Slideshow On All pages

Use CSS to Custom CSS box

/* Banner Slideshow arrow size */
.user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button {
    width: 100px !important;
    height: 100px !important;
}
svg.user-items-list-banner-slideshow__arrow-icon {
    width: 50px !important;
    height: 50px !important;
}

#2. Banner Slideshow on Desktop Only

Use this to Custom CSS box.

@media screen and (min-width:768px) {
  .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button {
      width: 100px !important;
      height: 100px !important;
  }
  svg.user-items-list-banner-slideshow__arrow-icon {
      width: 50px !important;
      height: 50px !important;
  }
}

#3. Banner Slideshow on Mobile Only

Use this to Custom CSS box

@media screen and (max-width:767px) {
  .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button {
      width: 100px !important;
      height: 100px !important;
  }
  svg.user-items-list-banner-slideshow__arrow-icon {
      width: 50px !important;
      height: 50px !important;
  }
}

#4. Specific Banner Slideshow

First, you need to find Slideshow ID.

Next, use CSS code like this

section[data-section-id="667a87bcafdd5271c4af6ced"] {
  .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button {
      width: 100px !important;
      height: 100px !important;
  }
  svg.user-items-list-banner-slideshow__arrow-icon {
      width: 50px !important;
      height: 50px !important;
  }
}