Mobile CSS not working as intended


I have a functional, but hacked-together website for use by teachers in Scotland that helps them find experiences and outcomes for years 1-10 (P1-S3) for all subjects.

However the mobile view isn’t working as expected. I’ve got CSSgrid layout and a media query which works when testing in a browser but when I’m using a mobile browser on a smartphone it doesn’t work in the same way.

Annoyingly works with the same CSS however does not. Any advice appreciated!

[Edit: Sorry forgot to add some useful Repl info!]
You can see results of a sample query here: and the Repl is here

Any advice appreciated!

1 Like

It’s ok. I fixed it after some research. Turns out I needed to add the following to the <head> section:

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

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.