<pre> text is tiny in mobile browsers; how can I fix it?

Question

<pre> text is tiny in mobile browsers; how can I fix it?

366 views Asked by weberc2 At 28 November 2014 at 04:19

I have preformatted text, which appears fine in the desktop browser, but on mobile everything is tiny relative to the normal text. If I change the size using ems or percent, it scales too large on desktop. I've Googled all over for solutions, but no luck so far. What's the best method for fixing this? Bonus points for explaining why <pre> renders so small in mobile browsers.

enter image description here

Here's the jist of the HTML; there is no CSS:

<html>
<body>
   <div class="content">
      <article>
      <time datetime="2014-01-17 00:00:00 +0000 UTC">17 January 2014</time>

      <pre><code>$ go run program.go  # run a go program
      $ go build package   # build a go package; Cmake, Autotools, etc not required!
      $ go install package # install a go package
      $ go test package    # test a go package
      $ go get package     # get any public package from the Internet
      $ go fmt package     # format a go package
      </code></pre>
      </article>
   </div>
</body>
</html>

Original Q&A

There are 4 answers

**Scott Weaver** · Answer 1 · 2014-11-28 04:35:06

Scott Weaver On 28 November 2014 at 04:35

You could use CSS3 media queries to differentiate based on screen width:

<style>
@media screen and (max-width: 700px) {
  pre {
    font-size: 120%;
  }
</style>

<pre>HEll yeah all these spaces
    and stuff</pre>

**Rahul Desai** · Answer 2 · 2014-11-28 04:35:13

You can fix that using @media queries of CSS3.

Example:

@media screen and (min-width: 320px) and (max-width: 420px){ /* set appropriate sizes here */
  pre{
    font-size: 20px; /* or whatever size that you want, you can also use % as suggested by @sweaver2112 */
  }
}

Learn about @media in CSS3 | MDN

**Nx2** · Answer 3 · 2022-12-22 00:00:05

Nx2 On 22 December 2022 at 00:00

adding this meta line fixed it for me

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

**cayhorstmann** · Answer 4 · 2023-03-25 06:11:00

cayhorstmann On 25 March 2023 at 06:11

Style the pre tag with white-space: pre-wrap;. Then the size is as expected with mobile browsers. Source

TechQA.

<pre> text is tiny in mobile browsers; how can I fix it?

There are 4 answers

Related Questions in CSS

Related Questions in HTML

Related Questions in PRE

Popular Questions

Popular Tags

Trending Questions