Overriding custom media queries with Bootstrap media queries

2
votes

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?

1
twitter-bootstrapmedia-queries

1 Answers

1
votes

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.