slider buttons displaying wrong on phone

Shopify Discussion
,
1

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 :slightly_smiling_face:

Phone:

IMG_4227.jpeg
IMG_4227.jpeg1179×2556 257 KB

Desktop with smaller screen

TrendBlend_0-1745405244920.png
TrendBlend_0-1745405244920.png1919×1079 502 KB

2

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