Как сделать метки кнопок видимыми в мобильном представлении - PullRequest
Новая
       11

Как сделать метки кнопок видимыми в мобильном представлении

0 голосов
/ 18 марта 2020

В моем блоге я настроил тег кнопки двумя различными способами, а их код выглядит следующим образом: 

    .button1 {
border: 2px solid rgb(0, 0, 0);
box-sizing: inherit; 
background-color: #ffffff; 
margin-right: 1.7px; 
color: black; 
font-size: 18px;
font-weight: 980;
padding: 6px 32px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px; 
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2 { 
border: 2px solid rgb(255, 87, 51);
background-color: #FF5733;
box-sizing: inherit;
margin-right: 1.7px; 
color: white; 
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px; 
font-size: 16px;
font-family: domine;
display: inline-table;}
.button2:hover {
  background-color: #FF5733;
  color: #000000;}

, но есть проблема, которую я выполнил, настройки, которую я сделал, не видны в мобильном представлении, это отображается как настройка по умолчанию. Как мне реализовать эти настройки в мобильном представлении? Помогите мне.

Кстати, я использую этот код: 

  @media screen and (max-width: 390px) {
.button2 { padding: 6px 32px;width: 84.6px;font-size: 16px;display: inline-table;
}
@media screen and (max-width: 390px) {
  .button1 { width: 76.6px;}
}}

, чтобы сделать настройку тега кнопки видимой в мобильном представлении. Я вставил эти коды в область CSS блога блоггера, но в мобильном представлении не видно никакого эффекта. Пожалуйста, помогите мне, если я использую неправильный код или вставляю код в неправильном месте.

Ответы [ 2 ]

1 голос
/ 18 марта 2020

Такая проблема обычно имеет одну из следующих причин:

  1. Ваш сервер поддерживает кэш. попробуйте удалить кеш из браузера.
  2. убедитесь, что код @media находится ниже ваших основных .button2 и .button1 кодов.
  3. убедитесь, что код @media введен в тот же файл, что и основные коды кнопок
1 голос
/ 18 марта 2020

Во-первых, это простая вещь, но многие люди делают это неправильно: не забудьте поместить код @media ниже других кодов. Во-вторых, если у вас одинаковый @ media screen и (max-width: 390px) , почему бы вам не поместить оба стиля кнопок в один и тот же @media? как это: 

@media screen and (max-width: 390px) {
   .button2 { padding: 6px 32px;width: 84.6px;font-size: 16px;display: inline-table;
    }
   .button1 { width: 76.6px;}
}

О, и это css должно быть помещено с использованием опции редактирования html вашего шаблона.

...