Anyone understand CSS properly?

[Michael Kilpatrick]

Gosh, this is winding me up.

I wanted to rejig my jazz orchestra website which was pretty old. I've
just started getting to grips with the flexbox model in CSS and I've
tidied up a few things.

But I can't get my head round one of the major problems:

One my phone if I create a simple test page
http://www.harmonyinharlem.co.uk/test.php with absolutely no styling or
sizing and just a few words of text, if I rotate the phone between
landscape and portrait, the size of the text changes so that it occupies
the same fraction of the width of the browser window (Android Chrome).

This means that in portrait mode the text is unbearable small but on my
desktop it's fine. On the phone in landscape, however, the text is twice
the (actual) size of the portrait orientation.

So why is the "default" (portrait) on the phone so small and how do I
use appropriate @media tags in the CSS to scale and change the design
according to the device and orientation? I can't seem to get my head
round this properly.

Worse than that, in an earlier iteration of my website the default in
mobile portrait came out at a sensible text size but whatever I've
changed seems to have obliterated that and now harmonyinharlem.co.uk is
tiny and stupid-looking.

Bloody hell, what a quagmire.

Michael

[Fevric J. Glandules]

IME, very very few people.

Michael Kilpatrick wrote:

> So why is the "default" (portrait) on the phone so small and how do I
> use appropriate @media tags in the CSS to scale and change the design
> according to the device and orientation? I can't seem to get my head
> round this properly.

Nor, would it seem, Google. On my (Android) phone Google results
come out in tiny text (in portrait).

> Bloody hell, what a quagmire.

Yup.

Try using bootstrap.