Как заставить кнопку HTML отображаться горизонтально на мобильном телефоне ⇐ Html

[Anonymous]

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

В настоящее время мы используем платформу веб-сайта, которая очень ограничена, поэтому мы использовали кнопку HTML, которая работала отлично, пока мы не поняли, как она отображается на мобильных устройствах.

Как это исправить?

скриншот рабочего стола

Learn More


.button {
border : none;
color : white;
padding : 16px 32px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 20px;
font-weight : bold;
margin : 2%px 2%;
transition-duration : 0.4s;
cursor : pointer;
font-family : Arial, Helvetica, sans-serif;
width : 25%;
margin-left : 37.5%;
margin-right : 37.5% text-shadow:none;
}
@media (min-width: 768px) {
.responsive-btn {
display : inline-block; /* Change to inline-block on desktop */
width : auto; /* Width adapts to content on desktop */
max-width : 300px; /* Optional max-width */
padding : 0.75rem 2rem; /* Slightly different padding */
}
}
.button1:hover {
background-color : #0074BC;
color : White;
border : 2px solid #FFCB05;
}
.button1 {
background-color : #FFCB05;
color : Black;
border : 2px solid #0074BC;
text-shadow : none;
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... -on-mobile