title: Show button only when view is responsive mobile size
body: <p>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. </p>
  
  <p>I'm having problems showing/hiding the button for the responsive webpage. </p>
  
  <p>Here's my attempt: </p>
  
  <p>contact page: </p>
  
  <pre><code>&lt;div&gt;
       &lt;p class ="Call-Customer-Support"&gt;Call customer support at 555-555-5555.   &lt;/p&gt;
       &lt;div class="Rectangle"&gt;
       &lt;img class="call icon-image" src="images/call.png" /&gt;
       &lt;a class="Call-Support" href="tel:555-555-5555"&gt;Call Support&lt;/a&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>where in my style.css: </p>
  
  <pre><code> .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;
      }
  </code></pre>
  
  <p>and in my responsive.css: </p>
  
  <pre><code>@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;
          }
  
  }
  </code></pre>
  
  <p>For all other sizes, I set these properties: </p>
  
  <pre><code>  .Rectangle {visibility:hidden}
    .call {visibility:hidden}
    .Call-Support{visibility:hidden}
  </code></pre>
  
  <p>However, it has no effect on the visibility of the items displayed...</p>