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

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

0 голосов
/ 23 апреля 2020

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

 .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 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 { 
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 a:link, .button2 a:visited {
  background-color: #FF5733;
  color: white;
  text-decoration: none;

}

.button2 a:hover, .button2 a:active {
  background-color: #FF5733;
  color:#000000;
}
@media screen and (max-width: 680px) and (min-width:0px){
.button2 { padding: 6px 32px;width: 85px;display: inline-table;max-height:80px;
 }
 .button1 {  padding: 6px 32px;width: 85px;max-height:88px;}
}}
<button style="margin:auto"class="button button1">BUY NOW</button><button  style="margin:auto;"  class="button button2">DETALS</button>

1 Ответ

0 голосов
/ 23 апреля 2020

Может ли быть проблема в том, что у вас установлен стиль кнопки auto на встроенную CSS на странице html? Это переопределит поля, которые вы устанавливаете на своей странице CSS. Возможно, это влияет на способ отображения кнопок, потому что медиа-запрос выглядит хорошо. Я действительно надеюсь, что это поможет. Удачи!

...