[Solved] Combining multiple media queries for the same styles

[Anonymous]

I want the same styles to apply to both ipads and iphones. I have the styles for iphone down and i want to include those same styles for ipads too. Is it okay to include the media queries for ipads and iphones in the same line?, to sort of combine them together? and if so, how?

[Philben]

iPad screen size is 1024 x 768; so media query like:
@media only screen and (max-device-width: 1024px) {
/* all elements must be scaled here */
}
This will cover all devices with width 1024px or less including iPhones.

[iknowdavehouse]

Based on what Philben said – You just have to remember that CSS reads top to bottom and will inherit what’s above it unless you tell it to override. When you do a @media you address what needs to change in the original code for that viewport size…and any other @media queries below in the flow will inherit the one above so if you just had one break point at 768px that would apply to any device below that.

However – While keeping the main break points in mind you might be better off just adding multiple media queries that address the issues with the layout as and when they need to be addressed as opposed to thinking purely about certain device widths….

[handsomep]

Is it possible to have two media queries where the first applies a styling that is common to both ipads and mobile and the second applies further styling for mobile devices only?

I have a media query block where I apply styling for ipads and another where I apply styling for mobile devices where much of the styling is similar. If I try to change the structure to have the first media query apply the common styling to ipad OR mobile (using a comma separator) and the second media query that applies styling only to mobile device, it doesn’t work as intended.

[handsomep]

OK, I figured out my problem. I was doing this:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait),
@media only screen and (max-device-width: 640px)

instead of:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait),
only screen and (max-device-width: 640px)

I had to omit the @media from the second condition

[Author]

Posts