I'm trying to make a responsive website using CSS Media Queries to create breakpoints for my iPhone 12 Mini and my partner's iPhone 12 Pro Max. I found the following viewport widths from several different sites all confirming the same thing:
iPhone 12 Mini viewport width is 375px
iPhone 12 Pro Max viewport width is 428px
The following is my css code:
// iPhone 12 Mini
@media screen and (max-width: 375px) {
.wine-list h1 {
font-size: 1rem;
}
}
// iPhone 12 Pro Max
@media screen and (min-width: 376px) {
.wine-list h1 {
font-size: 2rem;
}
}
The above code worked once before on both devices.
However, when I made one small change to the min-width value, the breakpoints stopped working correctly and started using the main css file. So I changed it back. But both devices still refuse to break appropriately. I do not understand. This seems to defy all laws of computer science. If it worked before, why won't it work again? What am I overlooking?
I test the website directly on the iPhone devices themselves, I do not use any emulators. I tested the code in Safari and Chrome. All help is appreciated.
The code was breaking because I used // to comment instead of /* */. CSS should technically never use // to comment anything. I can't believe I overlooked this. I should have known it was something so simple. 🤦🏻♂️ Everything works now across all browsers.