Jssor slider responsive caption, unwanted text resize

Question

Using JSSOR slider the function ScaleSlider() calls $ScaleWidth to resize the slider according to the viewport. This is achieved by applying a transform style to the #slider1_container element.

transform: scale(0.756364);

However, this also causes any text in the caption to be resized, rendering it illegible.

<div id="slider1_container">
    <div u="slides">
            <div u="caption" class="myCaption">
                <p>Text goes here</p>                   
            </div>              
            <img u="image" src="myImage.jpg" />             
    </div>              
 </div>

How can I prevent the caption text (.myCaption) to be affected by the transform style?

Answer 1

Caption should always scale along with slider. There is no option to stop caption from scaling.

Css trick below may meet your needs,

    @media only screen and (max-width: 480px) {
        .myCaption{
            ...;
            font-size: 24px;
            ...;
        }
    }

    @media only screen and (max-width: 768px) {
        .myCaption{
            ...;
            font-size: 16px;
            ...;
        }
    }

    @media only screen and (min-width: 769px) {
        .myCaption{
            ...;
            font-size: 12px;
            ...;
        }
    }