CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
John
John

Reputation: 1797

Including responsive styles in main stylesheet - overriding main styles

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?

Upvotes: 0

Views: 106

Answers (3)

Ravi Sukhadia
Ravi Sukhadia

Reputation: 441

you are write the min width in your media query and it can not write in max width.so give the max width also after that check.

@media (min-width:800px) and (max-width:767px){

}

Upvotes: -1

Nick
Nick

Reputation: 3281

change min-width to max-width
You can also apply a min-width and max-width

@media only screen 
and (min-device-width : 420px) 
and (max-device-width : 780px)


Also, keep in mind that if two selectors apply to the same element, the one with higher specificity wins.

Upvotes: 3

Thijs Kempers
Thijs Kempers

Reputation: 469

    @media only screen and (max-width: 780px) 
{
    .class
    {
        styles
    }
}

When you use this code everything restyles when the screen is SMALLER as 780px. But when you use min-width everything restyles when the screen is BIGGER as 780px

Upvotes: 0

Related Questions