Grid working on full size screen, pretend small screens, but not really

JavaScript
1

I’m working on a page where initially you see X number of buttons. Clicking a button takes you to the rule with the number of the button you clicked. There’s obviously a lot to do in styling, I’m just playing around, trying to understand grid now.

Here’s the codepen page: https://codepen.io/JohnPomeroy/project/editor/ABKBaR

The css/html for the grid is from the lesson here. It looks “fine” when I view it on my monitor and fine when I have my monitor pretend to be tablet or phone width. But when I upload it and view using an actual phone, it’s just rows. No columns.

It looks like this (which is my actual code with no grid-template-columns:.

rows
rows813×345 13.4 KB

Any help would be appreciated.

2

See if adding the following to the head element changes things for the better on mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1">

Also, what phone are you using to view the pen?

3

I’ve got the meta viewport line in there.

I’m using a ZTE cheapo ($25 at Walmart).

However… I’ve just been using the generic browser. It was the link on the phone’s home page. I just went and tried my page in the phone’s Chrome browser and it works.

I guess I should learn not to trust a browser named “Ume Browser.” I’ll stick with Chrome.

I’m going to give you credit for solving because you led me to looking at the other, real browser.

Thanks.

5

I gave you credit because it was your question of what my phone was that got me looking at what else was on it so that I realized I had chrome that fixed my problem. (which was don’t use crummy browsers)

You deserve the credit. If I hadn’t looked cxloser at the phone, I’d probably spend another couple of days playing with css, html, etc.

1 Like