Show button only when view is responsive mobile size

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:555-555-5555">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:555-555-5555">Call Support</a>
  <span class='show-large'>Call customer support at 555-555-5555.</span>
</div>