Issue
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:
What I want is, to show the FIRST anchor (#tryitnow
) by default, and show the other one (#tryitnow1
) when the screen is under 850px.
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
}
}
<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>
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!
Solution
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>
Answered By - FalcoB
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.