CODEWITHSUNDEEP
jssor
vector
vector

Reputation: 7566

override font-size in jssor slider when scaled down

Is it possible to reset font-size when slider is in 'responsive' mode? I have a slider that woks very well until the screen size goes down below about 740px wide. Then type becomes almost impossible to read.

So I tried to override font-sizes with media queries. No luck. Turns out transform: scale(0.32298) - or some decimal like that - gets applied to one of the parent containers. Tried overriding that too, but didn't get far with that either.

Is there a 'canonical' way to preserve/override scaling effects? ... callbacks, etc.?

EDIT:

transform appears as an inline style: 

<div style="position: absolute; top: 0px; left: 0px; width: 1024px; height: 654px; transform-origin: 0px 0px 0px; transform: scale(0.34454345703125);">

it appears in the first child of <div id="slider1_container"></div>

Upvotes: 0

Views: 258

Answers (2)

vector
vector

Reputation: 7566

Ended up using cycle2 plugin. Turned out to be pretty flexible and was able to restyle contents with media queries without any issues whatsoever.

Upvotes: 1

jssor
jssor

Reputation: 6985

So, I think you have some content elements as below in any slide in your slider.

<div style="...font-size: 50px; ...">You text</div>

Please move inline styles to css block, and then you get following format,

<div class="classname">You text</div>

In this manner, you have chance to apply different font-size on various screen.

<style>
    @media only screen and (max-width: 480px) {
        .classname {
            font-size: ...px;
        }
    }
    @media only screen and (max-width: 768px) {
        .classname {
            font-size: ...px;
        }
    } 
</style>

Upvotes: 1

Related Questions