简体   繁体   中英

Contentflow - how to make caption text to dynamic resize?

I am trying to add text to the images in contentflow but as I scroll through them I need the text to resize so the text does not move.

http://www.jacksasylum.eu/ContentFlow/index.php

I don't know if there's automatic way of doing this, but as of responsive web design you can hardcore the font size through CSS or using jQuery.

jQuery

$(window).on('resize', function(event) {
    if($(window).width() < 400) {
        $('.CAPTIONCLASS').css("font-size", "20");
    }
    else {
        $('.CAPTIONCLASS').css("font-size", "10");
    }
});

CSS

@media screen and (max-width: 400px) {
    .CAPTIONCLASS {
        font-size: 20px;
    }
}

@media screen and (max-width: 100px) {
    .CAPTIONCLASS {
        font-size: 15px;
    }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM