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

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:

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:.

Any help would be appreciated.

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?

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.


This is not Stack Overflow. You do not have to give credit here. I am just happy you figured out your issue.

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