fairly new around here, although I've been using StackOverflow as a reference for a while.
I'm an HTML/CSS/JavaScript noob, but managed to put together a website. I've researched for a few days the web, and can't understand what I'm doing wrong with the media queries. Help will be appreciated (in the form of good karma).
The 'Desktop' CSS applies fine, the 'Mobile' CSS applies fine, the 'Tablet' CSS doesn't apply.
My CSS sort of looks like this:
*{} html,body{}
@media screen and (min-width: 960px) {
CSS FOR DESKTOP (applies fine)
}
@media only screen and (min-width: 0px) and (max-width: 639px) and (orientation: portrait) {
CSS FOR MOBILE PORTRAIT (applies fine)
}
@media only screen and (min-width: 0px) and (max-width: 639px) and (orientation: landscape) {
CSS FOR MOBILE LANDSCAPE (applies fine)
}
@media only screen and (min-width: 640px) and (max-width: 1023) and (orientation: portrait) {
CSS FOR TABLET PORTRAIT (doesn't apply)
}
@media only screen and (min-width: 640px) and (max-width: 1023) and (orientation: landscape) {
CSS FOR TABLET LANDSCAPE (doesn't apply)
}
I tried a few tablets, Ipad, Acer, etc. Width sizes fit in the width brackets of the queries, but it doesn't apply.
I've shifted the order of the queries, I've checked the formats, I removed parts and replaced ('all', 'screen', 'and'), pretty much anything a nob would attempt. Checked SO website, and the internet (which is how I built my website..)
I also tried in different browsers.
What am I doing wrong? Thanks.
Should I share my website? Or is that possibly not wise because of security?
You are missing the "px" after 1023 in your tablet media queries.
If this answer solves your issue, please mark it as correct answer.