Why Doesn't Max-Width Override Min-Width

Why doesn't max-width override min-width?

Because of the CSS standards:

The following algorithm describes how the two properties influence the
used value of the 'width' property:

1. The tentative used width is calculated (without 'min-width' and
   'max-width') following the rules under "Calculating widths and
   margins" above.
2. If the tentative used width is greater than
   'max-width', the rules above are applied again, but this time using
   the computed value of 'max-width' as the computed value for 'width'.
3. If the resulting width is smaller than 'min-width', the rules above
   are applied again, but this time using the value of 'min-width' as
   the computed value for 'width'.

As such min-width always 'wins'. Within a specific CSS rule there's no precedence anyway, all values are applied atomically. Precedence only occurs when different rules all apply to the same element, and even then it is based on specificity first before file order is considered.

How to prevent min-width overriding max-width?

I've given it a few tries but I can't seem to make it work with CSS alone.
I would recommend using simple javascript or media queries to make it work.

Working jsFiddle

@media screen and (min-width:1000px){
    .about{
        width:50%;
    }
}

Note what @lmgonzalves wrote about min-width being the "strongest"..

Why is min-width property has preference over max-width?

From the MDN page:

max-width overrides width, but min-width overrides max-width

So i think there is no way to make max-width have higher priority than min-width

CSS: how to set a min-width that is overridden by a max-width?

Add a media query

@media screen and (max-width: 350px) {
    .half-right{
        width: 100%;
    }
}

Why doesn't width override max-width

Because max-width has more priority than width. Its function is to prevent width of an element to increase from certain boundaries. If you want width to override max-width then remove max-width.

A good link to refer given in comments

Why does a media query with a smaller min-width overwrite a larger one?

I know that 600px comes later in the CSS file which could be a reason

This is usually the reason, aside from unrelated authoring mistakes or, worse, browser bugs. Anything that is greater than or equal to 768px is, by necessity, also greater than or equal to 600px, so they both have to match.

See the following related questions for more information:

• Why does the order of media queries matter in CSS?
• What are the rules for CSS media query overlap?
• CSS specificity, Media Queries and min-width

but surely only one should only be applied if the screen size is either 600 or 768?

That's not true; @media rules are completely independent of one another. It doesn't make sense for @media rules to be exclusive, in particular when you consider that media queries can consist of any combination of media features.

For example, what should happen in this case when the media is (width: 600px) and (height: 300px)? (The correct behavior is that every rule is applied, with the last one taking precedence, because there is no other way for the UA to account for both width and height when evaluating the queries.)

@media {
    body { background-color: white; }
}

@media (min-width: 600px) {
    body { background-color: red; }
}

@media (min-width: 300px) and (max-height: 300px) {
    body { background-color: yellow; }
}

@media (max-height: 600px) {
    body { background-color: blue; }
}

Changing media queries from min-width to use max-width to avoid overriding?

You have your max- vs min-width mixed up.

max-width applies anywhere under the width set and min-width applies anywhere above

@media (max-width: 768px){
    span.crumbsTxt {
     font-size: 14px;
   }
}

DEMO

EDIT:
You have two options for ordering your media queries:
Option one (as you note above), order them largest to smallest as it will always apply the most recently declared styles first.
Second, make the media queries exclusive blocks:

@media (min-width: 320px) and (max-width: 768px){
    span.crumbsTxt {
     font-size: 14px;
   }
}

DEMO 2

Lets walk through your media-queries as an example:
(Lets assume we are on a screen size of 1000px)

 @media (max-width: 1824px) {} /* this media query will apply because the screen is less than 1824px */

 @media (max-width: 1250px) {} /* this media query will then apply (on-top-of the first media query) */

 @media (max-width: 992px) {} /* this media query will not apply because the screen size is greater than 992px */

 @media only screen and (max-width: 767px) {}  /* this media query will not apply because the screen size is greater than 767px */

If you want to avoid that cascading effect, you could modify your media queries like this:

 @media (max-width: 1824px) and (min-width: 1251px) {} 
 @media (max-width: 1250px) and (min-width: 993px) {} 
 @media (max-width: 992px) and (min-width: 768px) {} 
 @media only screen and (max-width: 767px) {}

*note, with this exclusive version, the order of the media queries is irrelevant

---

Related Topics