Text font size change with page width change (responsiveness)

Good day,

Does anyone know how to make text font size to respond to page width resize?
Example. I would like to start with font size 24 with page width being 1000 px. I need to change font size to 18 at around 768 px. Next, I need it to be size 16 around 667 px, finally size 14 at around 375 px. (I.e., 24 font/1000 px > 18 font/768px > 16 font/667 px > 14 font /375 px).

Your help is very much appreciated.


On the text element, go to the conditional tab. Create a new condition When page width < 768 page - font size is 18. Similarly add the rest of the conditions

Hi Sharma,

Thanks for the response. It helped to figure out what the problem is as you confirmed the instructions I have used were correct.

The problem is my iPhone (Xr), which does not respond to text change in horizontal view (667 px) only. Even when I set page width at 675 px or higher to show font 16 the phone does not take it in horizontal view. It keeps 24 font size.
But when it is in vertical view (380 px) it responds well displaying font 16.
iPad’s response is perfect as well.

I am certain it’s my phone, as I tested the responsiveness on another iPhone (Xs) and it worked well. Font changed to 16, no problem.

Not sure how to fix the phone issue. Someone might know.
I tried to update the phone and reset it, but to no avail.

Thanks again for your help.