Mobile CSS not working as intended

Code Help HTML/CSS/JS
1

Hi,

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 https://bgetoolssearchfilter2.ianatcsteach.repl.co/ works with the same CSS however https://bgetool.csteach.uk does not. Any advice appreciated!

[Edit: Sorry forgot to add some useful Repl info!]
You can see results of a sample query here: https://bgetoolscssissue.ianatcsteach.repl.co/ and the Repl is here https://replit.com/@IanAtCSTeach/bgetoolscssissue

Any advice appreciated!

1 Like
2

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
3

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