Element Carousel Image Size

Questions and answers about ShopSite Custom Templates

Element Carousel Image Size

Postby tmlogo » Fri Jul 08, 2022 9:00 am

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.
tmlogo
 
Posts: 103
Joined: Tue Jun 17, 2008 3:00 pm

Re: Element Carousel Image Size

Postby ShopSite Lauren » Wed Jul 13, 2022 9:59 pm

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>
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 887
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT


Return to Custom Template Questions

Who is online

Users browsing this forum: No registered users and 6 guests

cron