The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

[Solved] Combining multiple media queries for the same styles

  • Anonymous
    # March 24, 2013 at 6:15 pm

    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?

    # March 24, 2013 at 9:20 pm

    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.

    # March 25, 2013 at 5:30 am

    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….

    # July 11, 2015 at 10:35 pm

    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.

    # July 11, 2015 at 10:56 pm

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed