html - some @media rules not adhering -

html - some @media rules not adhering -

trying create nonawesome website @ to the lowest degree mobile-friendly, i've run unusual @media problem can't seem resolve.

at greater 800px widths, height of homebutton link homepage has margin-top: 40vh , works fine. added media rule css accommodate narrow width users , mobile browsers, including

@media screen , (max-width: 800px){ h1#homebutton { margin-top: 0; text-size: 1em; } }

among other @media rules. of other rules on page seem followed without problem, margin-top , text-size rules h1#homebutton not adhere.

discovered reply juuuust double- , triple-checking things prior posting. putting question , reply here benefit of others frustrated.

it turns out order of css mattered; when @media rule below (i.e. lower in code) css rules modifying, behaved correctly , modified them. when @media rule above css modified, vanilla css beneath rules adhered instead.

now @media rules @ bottom of css , works fine.

html css media-queries