Media Query Puzzle

#1

I’m having an issue getting a @media query to work for me. The other @media queries in my style sheet work fine but not the one I REALLY want to work for cell phone devices. See the code below - the black text works for my iPad but the code in red text does not work for my iPhone. Any ideas of what I’m doing wrong?

Screen Shot 2020-02-10 at 11.01.38 PM
Screen Shot 2020-02-10 at 11.01.38 PM820×904 89 KB

#2

Hi Randyrie,

Better use general media queries that work on all devices instead of device specific media queries that only work on one device!

You don’t have to specify the portrait mode if landscape is already specified in the code, but I wrote it down for extra clearness and it doesn’t harm to keep it in the code!

One could also add portrait mode to the first mobile phone media query if you want a more detailed specific overview of the code and it only to work in that mode. Otherwise it works in both orientations.

The background images you want to use need images for both orientations!

For all tablets and iPad portrait mode:

@media (min-width: 768px) and (max-width: 1024px) and orientation: portrait) {
body {
background-color: lightblue
}
div.row.marquee {
display: none;
}
}

For all tablets and iPad landscape mode:

@media (min-width: 768px) and (max-width: 1024px) and orientation: landscape) {
body {
background-color: lightblue
}
div.row.marquee {
display: none;
}
}

A media query for all mobile phones has to look something like this:

@media only screen and (min-width: 0px) and (max-width: 768px) {
body {
background-color: lightblue
}
div.row.marquee {
display: none;
}
}

If you need styling specific for landscape mode on mobile phones:

@media only screen and (min-width: 0px) and (max-width: 768px) and orientation: landscape) {
body {
background-color: lightblue
}
div.row.marquee {
display: none;
}
}

Regards,

David

#3

I agree with @AllMediaLab, there are too many devices with too many resolutions these days to write device specific queries. I like the approach outlined in this article: https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/
It is a few years old, but captures the ideas well.

Some other side points. If you look at your CSS rules, everything is the same except your background-image. Instead of bulking up your CSS you should toss out the duplication. I’m not sure what you want to happen above 1024px, but from 376px to 1024px you can have the same rules.

I think it is also worth looking at these two articles. src-set is not supported in IE or Firefox - not sure if there is a polyfill, but @media is very well supported. They would help you trim up your CSS a little and also take device density into account.


Thanks to @AllMediaLab for making me slightly more aware about modern advances in image selection!

1 Like
#4

Thanks @AllMediaLab and @RobM for your tips. I’m going to study and test these out tonight. I really appreciate this forum and its members - all are the best!