Grow your CSS skills. Land your dream job.

Combining multiple media queries for the same styles

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

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".