On my website, I have a button that leads users to the next section of the page. I am trying to hide this button in mobile view but I am struggling to find the correct CSS code to do so.
Check out the JSFIDDLE for the code:
https://jsfiddle.net/cgqme8xo/1/#&togetherjs=qTV1soRSqs
This is the HTML code snippet:
<section>
<a href="#main" class="scroll-down" address="true" class="text-right hidden-md"></a>
</section>
And here is the CSS used:
.scroll-down {
opacity: 1;
-webkit-transition: all .5s ease-in 3s;
transition: all .5s ease-in 3s;
}
.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -16px;
display: block;
width: 32px;
height: 32px;
border: 2px solid #EF4043;
background-size: 14px auto;
border-radius: 50%;
z-index: 2;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.scroll-down:before {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 6px);
transform: rotate(-45deg);
display: block;
width: 12px;
height: 12px;
content: "";
border: 2px solid #EF4043;
border-width: 0px 0 2px 2px;
}