slider buttons displaying wrong on phone

[TrendBlend]

Hello, when I open Glow Curtain: 400 LED Lights for a Magical Ambiance – InteriorGlows on phone, my slider buttons display weirdly, the left one is bigger than the right one, and there is no < or > to show direction. On desktop when I shrink the screen to mobile size, they do show correctly. Why does this happen and how can I always show it like on desktop with a shrinked screen? Thanks in advance 🙂

Phone:

Desktop with smaller screen

[Small_Task_Help]

Hi,

Hope this will help

- Find CSS (Style) File
- Add or Fix the Slider Button Styles

Code example:

/* Fix slider buttons on mobile */
.slider-button {
  width: 40px;
  height: 40px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-button::before {
  content: attr(data-arrow);
  color: #000;
}

@media only screen and (max-width: 768px) {
  .slider-button {
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
  }
}

- Make Sure Arrows Are Visible
- Clear cache