*
jason :tux: :oh_no_bubble: 𓀬

CSS question 

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 :)

1
*
jason :tux: :oh_no_bubble: 𓀬

re: CSS question 

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

w3schools.com/css/css_rwd_view

1+
shork
Follow

re: CSS question 

@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

· · Web · 2 · 0 · 0
shork

re: CSS question 

@k4gi also I am obligated to tell you that w3schools is one of the worst resources out there

developer.mozilla.org/en-US/do

0
jason :tux: :oh_no_bubble: 𓀬

re: CSS question 

@noiob but. but my website wasn't being scaled, until i put this line in

there's this 'automatic font sizing' setting in firefox that, when i turned it off everything just got really small like on desktop, and no longer,

1
shork

re: CSS question 

@k4gi I mean "everything looks really small" sounds like scaling to me

1
shork

re: CSS question 

@k4gi it's the difference between "pretend your browser window is normal-sized, let zoom/font scaling solve it" and "just use the phone as a very narrow browser window, the website content will reflow to fit it" which doesn't work on most desktop-only layouts

1+
shork

@k4gi also idk what you're hosting this on but loading your site takes 32 seconds for me, which feels like a bit much for 60kB

1
jason :tux: :oh_no_bubble: 𓀬

@noiob lol maybe a dns thing, i was using the url for a different website until recently

1
shork

@k4gi can't really be a dns thing since it's not the first load, I only disabled the browser cache

1
jason :tux: :oh_no_bubble: 𓀬

@noiob well i have no more ideas :) it's on a vps in sydney

1
shork

@k4gi maybe just a slow route or sth

0
jason :tux: :oh_no_bubble: 𓀬

re: CSS question 

@noiob i see i see, so the preformatted text wasn't being resized along with the rest of it because my browser assumed it wasn't designed to

0
Sign in to participate in the conversation
Awoo Space

Awoo.space is a Mastodon instance where members can rely on a team of moderators to help resolve conflict, and limits federation with other instances using a specific access list to minimize abuse.

While mature content is allowed here, we strongly believe in being able to choose to engage with content on your own terms, so please make sure to put mature and potentially sensitive content behind the CW feature with enough description that people know what it's about.

Before signing up, please read our community guidelines. While it's a very broad swath of topics it covers, please do your best! We believe that as long as you're putting forth genuine effort to limit harm you might cause – even if you haven't read the document – you'll be okay!

Trending now

Resources

Developers

What is Mastodon?

awoo.space

  • v3.5.3+glitch

More…

v3.5.3+glitch · Privacy policy