CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
John
John

Reputation: 1797

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

Rather than having one huge responsive.css files. I am including the media queries in the same stylsheet to keep everything together, for example i have wizard.css file, with:

 span.crumbsTxt {
   font-weight: normal;
   font-size: 16px;
   line-height: 1.25em;
 }

Then at the bottom of the same wizard.css file, i have:

    /* col-sm - Small tablets */
    @media (min-width: 768px){
         span.crumbsTxt {
         font-size: 14px;
       }
    }

The issue i am having is that all my styles from the media queries are overriding my original styles, even when it doesn't hit the small screen media query.

So in this example i am on a large screen, but for some reason its using all my styles from the media query!

I don't want to use !important, but don't understand why its doing this as it's breaking my whole site!

Thanks

EDIT: Is my media query setup wrong then - what needs to change?

Are my media queries wrong then, what needs to change to avoid my issues? :- 

 /* col-xs - mobile screens */
 @media only screen and (max-width: 767px) {}

 /* col-sm - Small tablets */
 @media (min-width: 768px) {}

 /* col-md - Medium screens */
 @media (min-width: 992px) {}

 /* col-lg - Large Desktop screens */
 @media (min-width: 1250px) {}

Seems that my bootstrap.min.css uses min width as well. Any ideas on how i could change the above media queries to solve the overriding issue i am having?

SOLUTION:

Would this be better suited - normal css first then order media queries largest first down to smallest and use max-width instead of min-width? The only thing im not sure on is the screen size values i have added - are these ok?

 Normal css first

 /* col-lg - Large Desktop screens */
 @media (max-width: 1824px) {}

 /* col-md - Medium screens */
 @media (max-width: 1250px) {}

 /* col-sm - Small tablets */
 @media (max-width: 992px) {}

 /* col-xs - mobile screens */
 @media only screen and (max-width: 767px) {}

Upvotes: 0

Views: 3342

Answers (1)

JRulle
JRulle

Reputation: 7568

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

Upvotes: 2

Related Questions