Slick slider why text so big on iphone only one item

Question

Title is 13px but only one display bigger

$('.p-index__business__list ul').slick({ autoplay: false, autoplaySpeed: 3000, slidesToShow: 3, arrows:true, dots:true, useTransform: false, { breakpoint: 1300, settings: { slidesToShow: 2, arrows: true, dots: true, centerMode:true, centerPadding:'70px', } }, { breakpoint: 1000, settings: { slidesToShow: 1, arrows: true, centerMode:true, centerPadding:'100px', } }, { breakpoint: 480, settings: { slidesToShow: 1, dots: true, centerMode:true, centerPadding:'80px', } } ] });

Sb help me. I dont know why

Answer 1

Transform property normally expands both text and image (in the slick slider [see link attached]). Yet your center image is same size (as the other nearby images) which indicates the transform property is occurring ONLY on the text section below the image. You can adjust the CSS to render that text transform size to be less. Try something like (adjust css as needed for your project) this to bring font size back down to a desired goal (it may also impact the tiny color box in lower right corner as well and if so you may need to code several lines).

.slick-center {
font-size: .9em;
}

Or...

.slick-current {
font-size: .9em;
}

Here's a post showing how both image and text expand via transform. stackoverflow