CSS glitch in new setup

[Sir Osis of Liver]

Been setting up new Win 11 computer, made a lot of changes involving desktop fonts, scale, and in FF to make it easier to see.  Most things look normal, but display template button text in my forums are tiny.  Look normal on old desktop, css hasn't been changed.  Not sure what to look for.  This will be a problem helping other forums if I'm not seeing what they're seeing.

[shawnb61]

New monitor, higher resolution?

[Sir Osis of Liver]

Yes, that's what I'm thinking, something to do with @Media queries in responsive css, but how do you fix it so it displays correctly for all users?

[Sir Osis of Liver]

Hmm, just comparing old computer with new.  Old display resolution is set at 1280 x 720, new is at 1920 x 1080.  If I reduce new display to 1280 x 720, looks the same.

This forum also looks different on new display, it's much wider and all fonts are smaller.

[shawnb61]

Hmm, just comparing old computer with new.  Old display resolution is set at 1280 x 720, new is at 1920 x 1080.  If I reduce new display to 1280 x 720, looks the same.

This forum also looks different on new display, it's much wider and all fonts are smaller.

(See my previous post...)

[Sir Osis of Liver]

Yes, but if I reduce resolution to same as old computer (both at 1280 x 720), the font is still tiny on new computer.  If the problem is in the @Media queries, both displays should be the same in same screen res.

[Diego Andrés]

What's your current resolution?
Do you have a link for this to see if we get the same issue?

[Steve]

What's your current resolution?

new is at 1920 x 1080

[Sir Osis of Liver]

You can see it here, post text looks normal, but text in user panel and buttons is very small on new computer.  Changing screen resolution doesn't fix it, but it's fine on old computer.  I've used variations of same theme (Nightbreeze) on client forums, and there've been no problems with font size.  IIRC, I did have to add some media queries to fix same issue on mobiles.  I've changed a lot of Win 11 display settings to accommodate my poor vision, will see if I can restore them to default.

Text on this forum is also smaller than it was.

[Diego Andrés]

Text on this forum is also smaller than it was.

This part is normal if you increase the resolution of your display.
For example, running 4K on a 27in monitor I need to use 150% zoom on windows, but 4k on 32in I'm fine with 125%.

I'll check the link later.

[Sir Osis of Liver]

Doesn't make any difference how I set screen res, scale, text size.  In any combination button text is still very small, as are user names (names only) in Users Online.

Changing browser font size also has no effect.

Same thing in Edge.

[Arantor]

Code Select Expand

/* the page navigation area */
.pagesection {
      font-size: 0.5em;
      overflow: hidden;
      margin-bottom: 1px;
}

The other places also set it to 0.5em which is half the width of the letter m in the font you're using, which comes out at 7.5px.
That seems relevant.

[@rjen]

Yep, that's what I see too, and on a laptop (so not a very large screen)

Before
You cannot view this attachment.

and after setting the font to 1em
You cannot view this attachment.

[Antechinus]

If the font is set to 0.5em of course it will be tiny, assuming the font stack as a whole is sane (which I do not know for sure).

This part is normal if you increase the resolution of your display.
For example, running 4K on a 27in monitor I need to use 150% zoom on windows, but 4k on 32in I'm fine with 125%.

Pixel ptich. Nothing at all mysterious about it. If you make pixels smaller, things set to the same CSS size will look smaller. D'oh.

The exception is devices (like phones) that have internal code that relates actual pixel size to "CSS pixel" size, since phone pixels are so tiny that nobody would be able to see anything if there was a 1:1 correlation with CSS.

Which I'm sure you knew already, but Sir Osis seemed not to know.

[Arantor]

*cough*, I see a little silhouetto of a

Code Select Expand

<meta name="viewport" content="width=device-width, initial-scale=1">
and a base font stack of...

Code Select Expand

font: 88%/140% Roboto,"Verdana", "Arial", "Helvetica", sans-serif;

[Antechinus]

Ah, yes. The old, and completely daft, stunt of putting Verdana into a font stack with Arial and Helvetica. Hadn't seen that one for a while.

The rest makes sense apart from the superfluous double quotes. For CSS beginners: you only need to put quotes around any font names which are comprised of two or more separate words. Single words do not need quotes around them, which is why it works with Roboto at the front sans quotes. Single quotes work just as well as double quotes too, and are faster and easier to type.

This would work:

Code Select Expand

font: 88%/140% Roboto, Arial, Helvetica, sans-serif;
But if you wanted to put a two word font into the stack, like Segoe UI, you would need quotes around it:

Code Select Expand

font: 88%/140% Roboto,'Segoe UI', Arial, Helvetica, sans-serif;
ETA: Incidentally, the SMF copyright looks great on a dark theme in the Bleeding Cowboys font. Adds a nice freestyle Gothic touch that goes well with the darkness.

But since it's a two word font name you have to quote it:

Code Select Expand

#footer ul:first-child .copyright {
  font-family: 'bleeding cowboys';
  font-size: 1.25rem;
}

[Sir Osis of Liver]

but Sir Osis seemed not to know.

Well, the thing I don't know is why it all looks correct on the old computer, and why none of the forums I used Nightbreeze on complained about such an obvious defect.  Most of the css is from SychO's original theme, I only changed what I had to to customize it, so there's a lot in there that I haven't seen or worked on. 

And 'bleeding cowboys' doesn't change copyright font from Roboto, which looks the same as Arial.

And iirc, Verdana was always in the font stack in 2.0 themes, including Curve, so there's no surprise seeing it here.

[Arantor]

Bleeding Cowboys isn't installed in your computer and Antechinus didn't give you the code to serve the font even when not installed, so, uh, no, there wouldn't be any difference.

[Antechinus]

Obviously. However I do have it on my box and rather like the look.

And yes, I know Verdana was in the font stack for 2.0.x. It was dumb. Typographically, Arial and Helvetica go well together, and they traditionally cover just about every box on the web, so using both of them in font stacks was normal. Verdana is a terrible match for either of them, and the whole idea of font stacks is to use fonts that match each other as closely as possible, so throwing in Verdana was always dumb. It only happened because Verdana was new and trendy, so people threw it in without thinking.

Roboto plays well in a font stack with Arial and Helvetica. It doesn't look "the same" if you have an eye for detail, but it's a close match.

[Arantor]

Verdana was also one of the "web safe" fonts, and back in the era where font-face being able to serve fonts, that mattered.