CSS显示：没有一个不能与媒体查询一起使用

Question

I have a site that I'm trying to make responsive. So I need to hide an anchor when under 850px. The code looks roughly like this:

<a href="javascript:void(0);" class="sign-up-button" id="tryitnow"><img src="assets/images/tryitnow.png" alt="Try it Now!"></a>
<div id="are-you-a-visionary">
   Bla bla some paragraphs
</div>
<a href="javascript:void(0);" class="sign-up-button" id="tryitnow1"><img src="assets/images/tryitnow.png" alt="Try it Now!"></a>

What I want is, to show the FIRST anchor ( #tryitnow ) by default, and show the other one ( #tryitnow1 ) when the screen is under 850px.

In the CSS it reflects:

div#container div#layout div#slot1 a#tryitnow {
  display: inline;
  position: absolute;
  top: 90px;
  right: 75px;
}
div#container div#layout div#slot1 a#tryitnow1 {
  display: none;
}

@media all and (max-width: 850px) {
    div#container div#layout div#slot1 a#tryitnow1 {
      display: inline;
      position: relative;
      margin-right:auto;    
      margin-left:5;    
    }
      div#container div#layout div#slot1 a#tryitnow {
      display: none
    }
 }

However, only of the anchor #tryitnow1 is visible all the time, no matter the screen size. #tryitnow ALWAYS gets hidden.

Why? Could you please help? Thank you!

Answer 1

the thing is, that your css selectors are not pointing right... try the following:

 div#container div#layout div#slot1 a#tryitnow { display: inline; position: absolute; top: 90px; right: 75px; } #tryitnow1 { display: none; } @media all and (max-width: 850px) { #tryitnow1 { display: inline; position: relative; margin-right:auto; margin-left:5; } #tryitnow { display: none } } 

 <a href="javascript:void(0);" class="sign-up-button" id="tryitnow"><img src="assets/images/tryitnow.png" alt="Try it Now!"></a> <div id="are-you-a-visionary"> Bla bla some paragraphs </div> <a href="javascript:void(0);" class="sign-up-button" id="tryitnow1"><img src="assets/images/tryitnow.png" alt="Try it Now!"></a> 

Answer 2

Try something like this: Demo

 #tryitnow {
    display: inline;
    position: absolute;
    top: 90px;
    right: 75px;
     background-color:#ccc;
}
#tryitnow1 {
    display: none;
}
@media handheld, only screen and (max-width: 850px) {
#tryitnow1 {
        display: inline;
        position: relative;
        margin-right:auto;
        margin-left:5;
     background-color:red;
    }
     #tryitnow {
        display: none
    }
}

Just use only the id / class which are needed, use the structure you followed previously where you have some hierarchy..