CODEWITHSUNDEEP
twitter-bootstrapmedia-queries
user3563192
user3563192

Reputation: 43

Overriding custom media queries with Bootstrap media queries

I have written media queries for different device sizes in my own css.

CSS:

@media only screen and (max-width :480px)
{
    ...
}

@media only screen and (max-width :768px)
{
    ...
}

the media queries successfully override bootstrap CSS but only (max-width :768px) gets applied whatever screen size may be.

Is there any issues regarding order of media queries?

Upvotes: 2

Views: 2960

Answers (1)

RichTea
RichTea

Reputation: 1435

As with all CSS, the second set of media queries will overwrite anything in the first if they're applicable to the same pixel widths. In your case, they are as the second set will also apply to screen-sizes under 480px.

If you're looking for a quick fix, either put the max-width:468px second, or convert the latter to 

 @media only screen and (min-width: 481px) and (max-width :768px)

But to do this properly, you should reconsider how your rules work logically in a cascading stylesheet.

Upvotes: 1

Related Questions