Hi all.

I'm trying to create a profile that makes me happy both on desktop and on mobile. Unfortunately, no matter what I put in the coding, the mobile version will not behave. I can't change the family, and the size is variable, not uniform.

Does anyone know how to fix this?

I'm using Firefox for both, although ideally this would work well on Chrome too.

One possible reason is that your Firefox on mobile is unable to process the CSS given to it caused by being an outdated version. In that line of thought just to see if that may be the case, what type of phone do you use? I assume either iphone or android though. Also what version is the OS?

My phone and Firefox are both up to date. It's on an Android, and the phone is only a couple of years old.

I've noticed this weird text size variation on other pages on Subeta too. I just am not sure what's causing it. I tried looking it up online but it kept redirecting me to the desktop version of Firefox.

ah

So have you tried using a different unit measurement for your font?, px should give a consistent result

Hmm, doesn't look like it.

14px

1em

I think you can see the top section is a lot smaller than the second section. It looks like pt does the same thing.

Is a puzzlement.

Usually text sizes on mobile appear a lot smaller than on a desktop. In order for your sizes to adapt to your viewport, you would have to tinker with vw and vh measures. As an example for those measurements, width: 50vw; height: 50vh; would mean that the container this is applied to would always size to the width and height of your windows. That you can apply to font-size too. To make it more stable, I would make use of the calc() function to give it some kind of base to work with. That's how you usually control these measures. Note that the space around the plus is obligatory.

.container { font-size: calc(10px + 1vh) }

If you know the screen resolution of your phone, you can design a separate version of those "unstable" containers using Media Queries . Those can be a pain to work with if you want to think about every device ever, but maybe you can figure something out! If you want, you can post your current progress, so we might help you out a bit more! ^^

It would seem that the problem lies with Firefox and not my coding. For two reasons:

• As I mentioned somewhere above, the variable font size happens all over the site, not just on my profile.
• When I use mobile Chrome, everything looks fine.

Unfortunately, I don't know what's up with Firefox or what setting to change to fix it - there might not be one that I can reach. I'm kinda giving up on it for now. Maybe I'll just go back to using Chrome.

Ah, okay. Unfortunately I can only guess where the problem comes from because I fail to reproduce the error. Usually the Firefox mobile browser can be really funky compared to their desktop version and Chrome is usually a lot more of a pain for me, haha. Feel free to write me if you have a change of mind and want to resolve that. ^^