Show button only when view is responsive mobile size - html

Question

I want to add a call support button to my webpage that has responsive design. I want to show the button only when the webpage is in mobile view and replace it with a line of text when it is not mobile view.
I'm having problems showing/hiding the button for the responsive webpage.
Here's my attempt:
contact page:
<div>
<p class ="Call-Customer-Support">Call customer support at 555-555-5555. </p>
<div class="Rectangle">
<img class="call icon-image" src="images/call.png" />
<a class="Call-Support" href="tel:[phone]">Call Support</a>
</div>
</div>
where in my style.css:
.Call-Customer-Support {
width: 709px;
height: 18px;
font-family: BentonSans-Bold;
font-size: 16px;
font-style: normal;
font-stretch: normal;
color: #ffffff;
margin: 50px auto;
}
.Rectangle {
width: 292px;
height: 57px;
border-radius: 8px;
background-color: #0e74af;
margin: 50px auto;
}
.call {
width: 24px;
height: 24px;
object-fit: contain;
margin-left:72px;
margin-top:16px;
vertical-align:middle;
float: left;
}
.Call-Support {
width: 116px;
height: 23px;
font-family: BentonSans-Regular;
font-size: 20px;
font-style: normal;
font-stretch: normal;
color: #ffffff;
margin-left: 8px;
vertical-align:middle;
text-decoration: none;
float:left;
display:block;
margin-top:17px;
}
and in my responsive.css:
#media only screen and (max-width: 767px) {
.Rectangle {
width: 292px;
height: 57px;
border-radius: 8px;
background-color: #0e74af;
margin: 50px auto;
}
.call {
width: 24px;
height: 24px;
object-fit: contain;
margin-left:72px;
margin-top:16px;
vertical-align:middle;
float: left;
}
.Call-Support {
width: 116px;
height: 23px;
font-family: BentonSans-Regular;
font-size: 20px;
font-style: normal;
font-stretch: normal;
color: #ffffff;
margin-left: 8px;
vertical-align:middle;
text-decoration: none;
float:left;
display:block;
margin-top:17px;
}
}
#media only screen and (max-width: 479px) {
.Rectangle {
width: 292px;
height: 57px;
border-radius: 8px;
background-color: #0e74af;
margin: 50px auto;
}
.call {
width: 24px;
height: 24px;
object-fit: contain;
margin-left:72px;
margin-top:16px;
vertical-align:middle;
float: left;
}
.Call-Support {
width: 116px;
height: 23px;
font-family: BentonSans-Regular;
font-size: 20px;
font-style: normal;
font-stretch: normal;
color: #ffffff;
margin-left: 8px;
vertical-align:middle;
text-decoration: none;
float:left;
display:block;
margin-top:17px;
}
}
For all other sizes, I set these properties:
.Rectangle {visibility:hidden}
.call {visibility:hidden}
.Call-Support{visibility:hidden}
However, it has no effect on the visibility of the items displayed...

Answer 1

here I added basic implementation of what you try to achieve
.call-support {
display: inline-block;
padding: 5px 10px;
background: #aaa;
color: white;
font-family: Arial;
text-transform: uppercase;
text-decoration: none;
border-radius: 5px;
}
.support {
text-align: center;
}
.show-large {
display: none;
}
#media only screen and (min-width: 767px) {
.show-large {
display: block;
}
.show-mobile {
display: none;
}
}
<div class='support'>
<a class="call-support show-mobile" href="tel:[phone]">Call Support</a>
<span class='show-large'>Call customer support at 555-555-5555.</span>
</div>

Answer 2

visibility is not enough to hide an element. You need to specify display:none; for it to be trully hidden.
In you example you can change the display property of the button to block inside the responsive file and display:none for the text. In the main css file you need to do exactly the opposite.
Also you can remove all duplicate code between files as both, I pressume, are included in the site (for example width,height etc.).
So the responsive file can be recuced to this code:
#media only screen and (max-width: 767px) {
.Rectangle {
display:block;
}
.Call-Customer-Support {
display:none;
}
}