Custom media queries only working on certain pages & browsers

In theme panel > custom css, I have this code posted:

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

.advert {background: url(http://example.com/wp-content/uploads/advert-1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
display: block;
width: 100%;
height: 90px;
}
}

@media screen and (min-width: 375px) and (max-width: 425px) {

.advert {background: url(http://example.com/wp-content/uploads/advert-2.jpg);
background-repeat: no-repeat;
display: block; background-size: 100% 100%;
width: 100%;
height: 90px;
}
}

@media screen and (min-width: 320px) and (max-width: 374px) {

.advert {background: url(http://example.com/wp-content/uploads/advert-3.jpg);
background-repeat: no-repeat;
display: block; background-size: 100% 100%;
width: 100%;
height: 77px;
}
}

Weird thing is, testing it on a 320px iphone, it works for the homepage but not on categories & posts. Same thing for firefox browser on desktop. When I test it with google devtools (adjusting the device sizes) it does show up. What is with the inconsistencies? I don’t have the latest theme update, could that be it? Even some pages on mobile it gives me the wrong image….