как исправить ширину кнопки для мобильного просмотра

Question

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

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

HTML код:

<button class="button button1">
    BUY NOW
</button>
<button class="button button2">
    DETALS
</button>

Answer 1

Для начала измените отображение кнопок с inline-table на inline-block