css - Opacity of element not set in media Query -

css - Opacity of element not set in media Query -

good day

i setting opacity on 2 elements, li element , image element. on hover effect, take away opacities.

problem: using media query display site on mobile phones. issue when set media query 1024px, want take away opacities completely, not trigger when viewport below 1024px ...refreshed well

why that:

code:

html:

<div id="app" class="span3"> <ul> <li id="apple"><a href="#" title="partyat iphone , ipad"><img src="images/apple.png" /></a></li> <li id="android"><a href="#"><img alt="partyat android app on google play" src="images/android.png" /></a></li> </ul> </div> , <div id="social" class="row-fluid"> <div class="span7"> <div id="app2"> <a href="https://itunes.apple.com/za/app/partyat/id597807299?mt=8" title="partyat iphone , ipad"><img src="images/apple.png" /></a> <a href="https://play.google.com/store/apps/details?id=io.ik.partyat"><img alt="partyat android app on google play" src="images/android.png" /></a> </div> </div> <div class="span5"> <a href="" title="partyat sa facebook page" target="_blank"><img src="images/fb.png" border="0" /></a> <a href="" title="partyat sa twitter page" target="_blank"><img src="images/twitter.png" border="0" /></a> </div> </div>

css:

#app ul li{ opacity:0.7; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=70)"; filter:alpha(opacity=70); padding-bottom: 15px; } #social .span5 img { opacity: 0.7; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=70)"; filter:alpha(opacity=70); }

media query:

@media screen , (max-width: 1024px;){ #app ul li { opacity:1; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=100)"; filter:alpha(opacity=100); padding-bottom: 15px; } #social .span5 img { opacity: 1; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=100)"; filter:alpha(opacity=100); } }

your media query working, after that, overwriting it:

@media screen , (max-width: 1024px;){ /* custom styles... */ #app ul li { opacity:1; } } /* normal styles */ #app ul li { opacity:0.7; }

so can utilize !important avoid conflict:

#app ul li { opacity:1 !important; }

warning: should not utilize !important if there improve solution. please, read following:

when 2 css rules conflicting, order of priority is:

rules !important have top priority inline styles more of import (e.g. <div class="someclass" style="inline style"></div> normal styles more specific rules > less specific (#one .example tag .yeah > .yeah) if 2 rules have same priority, lastly 1 applied wins

so, inspect css see what's happening. maybe can move media query end of stylesheet...

if still have problems, please post finish example.

css