i have these code blocks on my website. <pre> tags with <code> tags inside them. I'm currently looking at writing some CSS so they look nice, don't run off the edge of the page...

What I'm stuck on is, if I look at my website on my phone, all the text is much bigger. Great! Except. Text inside a <pre> tag is not bigger. It looks the same size as everything else on desktop, but really tiny in comparison on mobile.

I don't know what's making the text bigger on my phone, or how to ask it to make pre-formatted text bigger also. So if someone could point me in the right direction that would be great :)

I have finally solved this problem
Though I don't understand how

I add a line to the top of my pages' HTML

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

and then. all the text scales nicely including the stuff in <pre> tags

and then a bit of css

overflow-x: scroll;
max-width: 100%

to stop the code blocks running off the side of the page

w3schools is just like. just put this line. on all your web pages. and. i can respect that

https://www.w3schools.com/css/css_rwd_viewport.asp

@k4gi it basically just tells phone browsers that your site already works on phones, they don't have to try and scale it to be usable