How to change the font-text size based on a device using inline css?

I have WordPress site where I use a plug in to create a gallery.

I created a gallery and embedded it into my site.

However, the text for the image description covers the entire image size on the mobile.

How can I use inline CSS or other ways to change the font-size for the caption dynamically based on the device?

I have the following inline code right now, but that keeps the size of 17px all the time.

<style scoped>
.on-the-fly-behavior{
font-size:17px;
}
@media (min-width:200px){
.on-the-fly-behavior{
font-size:15px;}
}
</style>
<div class="on-the-fly-behavior">My Image Caption<div>

I want the font-size for the caption to be 17px on Desktop/Laptops and 15px or less on Mobile devices.

Solution

Try the below media query instead of the current one:

@media all and (max-width:570px){
    .on-the-fly-behavior{
        font-size:15px;
    }
}

The above media query will change the font size to 15px for all devices that are lower than 570px( I have used 570px because some large screen mobiles have this size. You may use 492px if you want ) in width.