I find it puzzling why the font size appears large on small screens for a non-responsive site (without the
<meta name="viewport" content="width=device-width, initial-scale=1.0">Here is the HTML code for two columns with text:
<div class="s">
<div>
<h2>...</h2>
<p>..</p>
</div>
<div>
<h2>...</h2>
<p>...</p>
</div>
</div>
And here is the corresponding CSS:
body {
font: 100%/1.5 Tahoma, Geneva, sans-serif;
}
.s {
display: flex;
margin: 50px auto;
width: 1000px;
}
.s div {
background: #eee;
flex: 1 1 100%;
}
You can view the demo here. Feel free to test it using F12 or Ctrl+Shift+M (device mode) in Chrome.
Another demo with scalable text in the <body> section can be found here.
https://i.sstatic.net/hE0nc.png
I aim to have all the text styled like the one highlighted within the red border in the image above.