CODEWITHSUNDEEP
css
DextrousDave
DextrousDave

Reputation: 6793

Opacity of element not set in media Query

Good Day

I am setting the opacity on 2 elements, an li element and an image element. On a hover effect, I take away the opacities.

Problem: I am using a media query to display my site on mobile phones. Issue is that when I set the media query for 1024px, I want to take away the opacities completely, but it does not trigger when the viewport is below 1024px ...refreshed as well

Why is that:

code:

HTML:

     <div id="app" class="span3">              
           <ul>
               <li id="apple"><a href="#" title="PartyAt for iPhone and 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>

 and

 <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 for iPhone and 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 and (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);
 }

}

Upvotes: 1

Views: 831

Answers (2)

SameProblem
SameProblem

Reputation: 1

Check if you have multiple calls of the same item. That's what happened to me. They were all stacked on top of each other and created a solid item!

Upvotes: 0

Salvatorelab
Salvatorelab

Reputation: 11873

Your media query is probably working, but after that, you are overwriting it:

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

/* normal styles */
#app ul li { opacity:0.7; }

So you can use !important to avoid conflict:

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

WARNING: you should not use !important if there is a better solution. Please, read the following:

When two CSS rules are conflicting, the order of priority is:

  1. rules with !important have top priority
  2. inline styles are more important (e.g. <div class="someclass" style="inline style"></div> than normal styles
  3. more specific rules > less specific (#one .example tag .yeah > .yeah)
  4. if two rules have the same priority, the last one applied wins

So, inspect your CSS to see what's happening. Maybe you can just move your media query to the end of the stylesheet...

If you still have problems, please post a complete example.

Upvotes: 1

Related Questions