CSS media query order issue

media queries css tricks
media query css for all devices
multiple media queries
desktop first media queries
media query range
inline media query
media query breakpoints 2019
where to put media queries

I am updating a text element which ID has if7ou. Issue is that if user update style on mobile view first and then the tab view then media query do not work for tab view. If we update style for desktop first, tab second and mobile third then everything works fine but if we reverse the step mobile view first, tab view second and desktop view third then css/media query will not work for tab and desktop view. So I want any option that we can add css in any order either 480 first and 992 second or vice-versa css should be apply based on device size not the based on order on which they come.

@media (max-width: 480px) {
    #if70u {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    #if70u {
        font-size: 40px;
    }
}

I think it was due to 480 should be down and 992 should be above. Any help would be appreciated, thanks!

I would suggest to use min-width instead of max-width. This will ensure that the 992px styles will not load or appear in your mobile view. It will also better satisfy the requirement of "mobile first", in that you are only loading mobile styles for mobile, and then adding tablet styles only when the viewport grows for tablet, and so on. This will also solve your issue.

#if70u {
    font-size: 20px;
}

@media (min-width: 481px) {
    #if70u {
        font-size: 40px;
    }
}

In general, I use max-width sparingly, and often, when I do need it, it's because I created some sort of crappy code that has consequences later on down the waterfall.

All of this might seem nit-picky, but I am trying to learn the best way to structure my CSS and media queries so I don't have issue down the road. CSS Media Queries - More Examples. Let us look at some more examples of using media queries. Media queries are a popular technique for delivering a tailored style sheet to different devices. To demonstrate a simple example, we can change the background color for different devices:

In this case you should use mobile-first technic, declarations on the main class apply to mobile, then you increase your media-queries to bigger devices, take a look:

#if70u{
  font-size: 14px; //Its apply for mobile
}

@media screen and (min-width: 768px){
  #if70u{
    font-size: 16px; //Its apply for tablets
  }
}


@media screen and (min-width: 992px){
  #if70u{
    font-size: 18px; //Its apply for small desktop screens
  }
}


@media screen and (min-width: 1200px){
  #if70u{
    font-size: 20px; //Its apply for large desktop screens
  }
}

Swap that order and at browser window widths above 800px the background would be red, perhaps unintuitively. #Mobile First. Your small  Ordering CSS and Media Queries. All of this might seem nit-picky, but I am trying to learn the best way to structure my CSS and media queries so I don't have issue down the road.

In addition to @S. Dunn answer.

If you want to set a style to specific minumum and maximum width you can use this:

@media only screen and (max-width: XXXpx) and (min-width: XXXpx)

So in your case it would be:

#if70u {
    font-size: 20px;
}

@media only screen and (max-width: 992px) and (min-width: 481px) {
    #if70u {
        font-size: 40px;
    }
}

Media queries are useful when you want to modify your site or app (Please see paged media for information about formatting issues that are specific to media query, requiring each chained feature to return true in order for  trip over the order rules of child elements to correctly organize them. What a headache! Media queries will quickly get out of hand if we take this approach for any complex layout. Enter grid-template-areas CSS grid definitely has the advantage when it comes to quickly organizing layouts.

gtxxcJ { margin: 4px; padding: 4px; }. Which is wrong, as the lower media query is overriding the higher one (due to order in css). Reproduction:  To conditionally apply styles with the CSS @media and @import at-rules. To target specific media for the <style>, <link>, <source>, and other HTML elements with the media= attribute. To test and monitor media states using the Window.matchMedia () and MediaQueryList.addListener () JavaScript methods.

The generated styles from Radium for nested media queries adds media query css to the page in the order that it is received (the order the  The @media rule is used in media queries to apply different styles for different media types/devices. Media queries can be used to check many things, such as: width and height of the viewport; width and height of the device; orientation (is the tablet/phone in landscape or portrait mode?) resolution; Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

in this tutorial. It could be a CSS3 media query mistake so simple that you've just overlooked it. You may be overthinking the problem. Did you When we talk about “Order of Precedence” in CSS, there is a general rule involved. CSS is​  This page lists a ton of different devices and media queries that would specifically target that device. That’s probably not generally a great practice, but it is helpful to know what the dimensions for all these devices are in a CSS context. Thanks, Frontend Masters! Take your JavaScript to the next level and find out what it’s fully

Comments
  • According to sequence you provided, 2nd rule overrides 1st one. You can separate viewports of media by stating 2nd rule as @media only screen and (max-width: 992px) and (min-width: 481px)
  • Also make sure that a line <meta name="viewport" content="width=device-width, initial-scale=1"> is present in your page code
  • @Prince, did you get your question answered? Are any of these answers worth marking as being the answer?