Media Query Puzzle

General
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