CSS code not working on mobile

[Digmen1]

Hello
This is my first responsive website
I am using a simple grid style
It works fine on desktop
But I have been trying for days to make it change to a vertical layout for mobile
Any suggestions please?

@media screen and (min-width: 500px){

.container{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr 2fr 1.5fr 1.5fr;
grid-template-areas:
"navbar"
"content"
"left"
"right"
"article"
"footer";
}
}

I have this in my html

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

I have tried
@media screen and (max-width: 500px){
and it still does not work

Thanks, any help or suggestions would be greatefully recieved

[not2easy]

I am not familiar with this type of grid system, it does not seem to be using standard CSS. I have to ask whether that is a typo in the title, where it says that CCS code is not working - did you mean that the CSS code is not working? What is the unit of measure you are using, the "fr"? Usually we see px or pt or em or even pc (pica) or mm, in % and a few others but I have no reference to fr.

I have been known to miss new things now and again so I hope that is the case, and we can find an answer for you. It almost appears to be some proprietary template code.

[Digmen1]

The website does not scale properly to look good on mobile
Its all my own code it works good on desktop - nice and simple.
Fr is a new measurement been out for a few years, they say its the way of the future
You take the width of the screen and set how much you want each grid colum to be. eg 1fr, 1fr 1fr means you have 3 coloumns each of one third the width!

[tangor]

fr is "fraction"

That said, I rely on % myself ... seems more exact.

YMMV

[NickMNS]

@not2easy
[developer.mozilla.org...]
Grid-Lyout is not supported by Internet Explorer.

@tangor

I rely on % myself ... seems more exact.

Mathematically speaking, fractions would be more exact as 1/3 = 0.3333.... whereas 33% would be 0.33. Now in practice it would really depend on the implementation. But for the purposes of laying out a web-page there should be no difference.

@digmen1
You show the css for the media query, which is a conditional statement that states if the screen is a certain size. In your case, if the screen width is bigger than 500px, but you do not show any code for when the screen is less than 500px.

you also state:

I have tried
@media screen and (max-width: 500px){
and it still does not work

This inverts the condition.

So the question is, what is the code for when the condition is not met?

[edited by: not2easy at 7:15 pm (utc) on Jun 29, 2020]
[edit reason] fixed the link (removed . at end) [/edit]

[lucy24]

max-width = screen is no wider than the number specified
min-width = screen is no narrower than etcetera.

The easiest approach is to set up a default format, and then define the exceptions for when a viewport is significantly bigger/smaller than your envisioned default. If it's an existing site, you may be able to get a sense of what most visitors are using, whether it's desktop or smartphone, and call that the default. (Has anyone ever had a page whose visitors were most often tablets? Me neither.)

Oddly enough, it’s only a few days since I added a min-width rule to a couple of specific pages, to allow for users with desktops set to take up the entire screen. (I personally detest this look, but I know some people do it.) The max-width rules had been in place for years.

[not2easy]

Thanks for the link @NickMNS, a good resource. I visited earlier and got a 404 tried again and noticed a period at the end of the link so after removing that, I took a look. I will add that to the CSS forum's Charter, TY.