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.
New monitor, higher resolution?
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?
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.
Quote from: Sir Osis of Liver on May 12, 2024, 01:40:05 PMHmm, 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...)
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.
What's your current resolution?
Do you have a link for this to see if we get the same issue?
You can see it here (https://www.thekrashsite.com/forum/index.php?topic=40.msg1612#new), 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.
Quote from: Sir Osis of Liver on May 13, 2024, 01:11:54 PMText 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.
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.
/* 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.
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.
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).
Quote from: Diego Andrés on May 13, 2024, 01:39:41 PMThis 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. :)
*cough*, I see a little silhouetto of a
<meta name="viewport" content="width=device-width, initial-scale=1">
and a base font stack of...
font: 88%/140% Roboto,"Verdana", "Arial", "Helvetica", sans-serif;
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. :D
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:
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:
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. :D
But since it's a two word font name you have to quote it:
#footer ul:first-child .copyright {
font-family: 'bleeding cowboys';
font-size: 1.25rem;
}
Quote from: Antechinus on May 13, 2024, 05:28:22 PMbut 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.
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.
Obviously. :D 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.
Verdana was also one of the "web safe" fonts, and back in the era where font-face being able to serve fonts, that mattered.
Well, anyway, before bricking computer last night I changed the font sizes, now it looks the same on both computers. Why would they have looked different on two different computers running same browser in same screen resolution?
Quote from: Arantor on May 14, 2024, 06:31:41 PMVerdana was also one of the "web safe" fonts, and back in the era where font-face being able to serve fonts, that mattered.
Arial:Sure, but if you are already calling Arial and Helvetica you are not likely to be leaving anyone in the lurch anyway. And even if you did want another "web safe" font in the stack, Trebuchet MS is a better match than Verdana.Trebuchet MS:Sure, but if you are already calling Arial and Helvetica you are not likely to be leaving anyone in the lurch anyway. And even if you did want another "web safe" font in the stack, Trebuchet MS is a better match than Verdana.Verdana:Sure, but if you are already calling Arial and Helvetica you are not likely to be leaving anyone in the lurch anyway. And even if you did want another "web safe" font in the stack, Trebuchet MS is a better match than Verdana.And before anyone says "But Verdana is more legible for the same nominal font size" - that's because it has huge x-height so is effectively a larger font size anyway, but with stubby ascenders and descenders, so it's clunkier, and it makes for terrible body text because it screws up the line height unless you set an excessive line height for all fonts.
It's still good for some things, mainly short single lines of text at very small font sizes, but as a general body text it's not that good.
Quote from: Sir Osis of Liver on May 14, 2024, 07:32:12 PMWell, anyway, before bricking computer last night I changed the font sizes, now it looks the same on both computers. Why would they have looked different on two different computers running same browser in same screen resolution?
On the exact same monitor? Or on two different monitors with different pixel pitch?
Two different HP monitors, same screen res. How to determine pixel pitch?
If they have the same native (not forced) screen resolution, then pixel pitch will be determined solely by the relative sizes of the monitors.
As an example: a 24 inch monitor that is 1920 x 1080 by default will have 3/4 the pixel pitch of a 32 inch monitor that is 1920 x 1080 by default. Things on that 24 inch monitor will appear to be 3/4 the height and width of the same things on the 32 inch monitor, and they will have only 9/16 of the area.
You can often find the pixel pitch for a monitor in online reviews of it, under the specifications.
Old display is 23", new is 23.8". Same brand (HP), newer model. Changing font size did not change anything on old computer, everything looks the same. Only new computer was affected, tiny fonts are now normal size.