CODEWITHSUNDEEP
cssmedia-queries
Dom Ramirez
Dom Ramirez

Reputation: 2212

CSS Media Query Styles Being Overridden

I've looked into media query related questions for a while yet haven't found a solution to my problem. I'm sure it's just a tiny thing I'm overlooking, but for some reason I can't figure it out.

So, I have a button with the class .ScopeToggle that I want to adjust for mobile phones in portrait orientation. I've tried all of the different orientations I can conceive, but here's how I'm doing it right now:

In the HEAD tag:

<link rel="stylesheet" type="text/css" href="buttons.css" />
<link rel="stylesheet" type="text/css" href="mediaQuery.css" media="only screen and (max-width:340px)" />

In the buttons.css stylesheet:

#MainContainer .ScopeToggle
{
    position: absolute;
    right: 7px;
    width: 150px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    list-style: none;
    font-size: 0.8em;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.3);
}

In the mediaQuery.css stylesheet:

.ScopeToggle
{
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    background: none;
    width: 75px;
}

The problem is when I look at this in chrome's dev tools the media query styles are getting picked up and displaying in the 'styles' pane, but are crossed out (to show that they've been overridden by the buttons.css styles).

I didn't have this issue when all of the styles were just written into the document's HEAD tag, but for some reason this abstraction has stopped it from cascading as expected. I've also tried putting the media query directly inside of the stylesheet without the LINK element having an inline "media" attribute AND I've put the media query inside of its own STYLE tag below buttons.css, but this all has the same result.

Thoughts? Thanks in advance.

Upvotes: 0

Views: 1326

Answers (1)

Dom Ramirez
Dom Ramirez

Reputation: 2212

The default style has an ID prefixed to it while the media query's style does not.

CSS Selector in buttons.css:

#MainContainer .ScopeToggle {...styles...}

CSS Selector in mediaQuery.css:

.ScopeToggle {...styles...}

So, adding '#MainContainer' to the mediaQuery.css selector gives it dominance and solves the problem.

Upvotes: 2

Related Questions