I'm currently working on making my website responsive, and I have a specific requirement where I need to hide an anchor when the screen size is under 850px. The code snippet I have is as follows:
My goal is to display the first anchor (#tryitnow) by default, and switch to displaying the second anchor (#tryitnow1) when the screen size is less than 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, I'm currently facing an issue where only the anchor #tryitnow1 is visible regardless of the screen size, while #tryitnow is always hidden. Can anyone provide assistance as to why this is happening and how to resolve it? Thank you!