Unit 3 · CSS: the look and the layout
Media query not working on a phone? Two fixes
Check two things. First, the viewport meta tag: without it, a phone pretends to be about 980px wide and zooms out. Second, order: put the media query after the default rule, or the default wins at every width.
The mix-up
What people often think
“More media queries will fix it.”
What the tutor says
The queries are fine. The phone is reporting a fake 980px width until the viewport meta tag tells it to use the screen width.
How it works
Adding more media queries or bigger text will not help if the phone is lying about its width. One line in the head tells it to use the real screen width.
A media query does not add specificity. .cards inside a query and .cards outside it are equally specific, so the later one wins. Write the default first and the query after it.
An example
<meta name="viewport" content="width=device-width, initial-scale=1">Close cousins of this mix-up
The tutor watches for these in the same lesson.
“The text is just too small.”
Bigger text would still sit in a zoomed-out page. The phone needs the viewport meta tag to stop zooming out.
“It does not matter where the media query goes.”
The query and the default rule are equally specific, so the later one wins. Put the media query after the default, or the default overrides it at every width.
Practise it with a tutor watching
Responsive design
Make one page work from a phone to a wide screen, starting with the phone.
Free with an account. The first two units need no account.