ShopSite Forums

When the carousel is set, the "line pager lines" to click to move to the next image (when on a mobile device) land on the images themselves not below. Instead of allowing the user to move to the next image, it takes them to the linked page. I have played with different sized images hoping to prevent this, but it doesn't work, I wanted to know what I need to do to make this work correctly on mobile.

The slide indicator lines won't be clickable on a mobile device because of 'fat fingers' where the 'click' space is only a couple pixels. Instead, on a mobile device a visitor would need to use the prev/next arrows, or swipe the carousel area to switch the slide. However, if you want to move the indicators to below the slides themselves for mobile, you would add the following CSS to your template in the Element-Head.sst include file.

Code: Select all

<style type="text/css">
@media screen and (max-width:768px) {
  .line_center .carousel-indicators, .line_center .carousel-indicators:not(#carousel-indicators) {bottom: -20px !important}
}
</style>