sukotu sukotu - 7 months ago 13
HTML Question

CSS media query not changing elements?

I'm trying to get this media query to work... I've changed a border and element colour, and position so I can clearly see when it's worked but it doesn't seem to be applying the rule at all - what have I missed? I'm looking for spaces and typos but I can't see any...

HTML

<div id="introcontainer">
<div id="introcontainer2">
<div class="introbox" id="introbox1">48</div>
<div class="introbox" id="introbox2">3</div>
<div class="introbox" id="introbox3">£99</div>
</div>
</div>


CSS

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

#introcontainer {
width: 660px;
height: 134px;
position: absolute; left: 50%; top: 100px;
margin-left: -330px; border-style: dashed; border-color: red;}

.introbox {
width: 214px;
height: 130px;
background: #fffff;
opacity: 0.1;
border-radius: 4px;}
}

#introcontainer {width: 660px; height: 134px; position: absolute; left: 50%; top: 250px; margin-left: -330px; border-style: dashed; border-color: aqua;}

#introcontainer2 {position: relative;}
.introbox {
width: 214px;
height: 130px;
background: #6666CC;
opacity: 0.5;
border-radius: 4px;
}

#introbox1 {position: absolute; left: 0px;}

#introbox2 {margin-left: auto; margin-right: auto;}
#introbox3 {position: absolute; right: 0px; top: 0px;}

Answer

There's a couple of things. First of all, background:#fffff in .introbox should be #ffffff or #fff. Secondly, the rules in the @media rule are being overridden by the following rules outside of @media. That's all right, just move the @media rule so that it is at the end of the CSS rather than at the beginning. If you need anything else, let me know.