Responsive captions?

Hi. Are you using the Caption area or the Layers area for adding captions? If you’re using Layers, you could disable the Auto Scale Layers option, which is responsible for automatically resizing the layers proportionally with the size of the slider. Then, you can use custom CSS and media queries to customize the aspect of the layers for different screen sizes. Example 1 uses this method.

Best,
David

Thanks, yes I used layers and unchecking auto scale made thing a lot better. I have some css to format the captions text, but is there a way to make the dots under the slider smaller? On the smartphone they are now huge.

/LA

Still hoping for an answer on how to change size on the slide dots. And one more thing: I’m trying to change the font size but to no avail, I’m afraid. I have added this CSS:

.sliderpro-h3 {
font-size: 16px;
font-family: Raleway, sans-serif;
font-weight: 400;
line-height: 22px;
padding-bottom: 5px;
padding-left: 5p
padding-right: 5px
}

but no matter how I change the font size here it stays the same in the slides. What do I do wrong?

Hi,

You can control the size of the buttons with this CSS:

.sp-button {
    width: 18px;
    height: 18px;
}

You might need to add !important in order to enforce your own styling or use a selector with higher priority.

However, please note that on mobile it’s better to have bigger buttons in order to make them easier to tap.

Regarding the font styling you must check that your CSS selector is correct and your styling is not being overwritten by other CSS. I can’t say exactly why it doesn’t work for you without checking the actual page. Also, please note that you have some syntax error in the code you pasted here: padding-left: 5p should be padding-left: 5px;

Best,
David

Thanks so much! I can now change the caption font size and make the buttons as small as I want. Great!

/LA

resolved.

You’re welcome!