Показать кнопку только в том случае, если представление является отзывчивым. Размер мобильного телефона

Question

Я хочу добавить кнопку поддержки вызова на свою веб-страницу с отзывчивым дизайном. Я хочу показать кнопку только в том случае, если веб-страница находится в мобильном режиме и заменяет ее линией текста, если она не является мобильным.

У меня проблемы с отображением/скрытием кнопки для отзывчивой веб-страницы.

Вот моя попытка:

контактная страница:

<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> 

где в моем 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; 
    } 

и в моем 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; 
     } 

} 

Для всех других размеров я устанавливаю как таковые свойства:

.Rectangle {visibility:hidden} 
    .call {visibility:hidden} 
    .Call-Support{visibility:hidden} 

Однако, это не имеет никакого влияния на видимость элементов, отображаемых ...

Answer 1

здесь я добавил базовую реализацию того, что вы пытаетесь достичь

.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>

Answer 2

visibility недостаточно, чтобы скрыть элемент. Вам нужно указать display:none;, чтобы оно было скрыто.

В этом примере вы можете изменить свойство display кнопки block внутри файла с ответом и display:none для текста. В главном файле css вам нужно сделать все наоборот.

Также вы можете удалить все дублирующиеся коды между файлами, так как я, как и я, попал на сайт (например, width, height и т. Д.).

Так ответная файл может быть recuced этому коду:

@media only screen and (max-width: 767px) { 
    .Rectangle { 
     display:block; 
    } 
    .Call-Customer-Support { 
     display:none; 
    } 
}