csstextfont-sizeparagraph

How to prevent text size from changing depending on size of container on mobile version of my website?

font-size is inherited from the same parent for the elements in question. however it displays differently. I am at complete loss on how to solve it.

text in this element displays as it should text in this element grows on mobile Chrome and Mozilla. Displays as it should on Opera on horizontal version of website when column width is limited to 40% text size is as it should be in vertical version, if I limit column width, text sizes as they should be

But if I let max-width of the container element be 100% on vertical verwion of website, the text grows despite font-size not changing.

Solution

  • Presumably, your pages lack the viewport meta instruction, like for example

    <meta name="viewport" content="width=device-width, initial-scale=1">

    so their scaling is completely up to each device: some may render it in a fixed default ~800px wide virtual viewport and then they may or may not try to scale that down into the actual viewport (what corresponds with your screenshots, I guess). Adding aforementioned meta should usually help.