
Однако на моем телефоне Google Chrome не отображает это так:

Почему это происходит? Вот все части указанной проблемы:
Html-структура родительского узла и самих кнопок:
Код: Выделить всё
@if(loginForm.getError('loginFailed')) {
{{ loginForm.getError('loginFailed') }}
}
label="Iniciar Sesión"
class="green-button w-100"
(onClick)="submitLoginForm()"
/>
Код: Выделить всё
@use '../../../shared/styles/generalStyles/mixins' as mixins;
:host {
display: block;
margin: 0 auto;
}
form#login-form {
background-color: #F5F5F5;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
form#login-form > div {
/* Fixed width was set to prevent the form go wide all across the window width*/
width: 320px;
display: grid;
grid-template-columns: auto 1fr;
gap: 15px;
justify-content: center;
align-content: center;
align-items: center;
input {
font-size: 20px;
}
@include mixins.change-layout(phone) {
width: 250px;
}
}
span.mensaje-error {
font-size: 21px;
color: red;
}
Код: Выделить всё
p-button.green-button {
width: fit-content;
}
p-button.green-button.w-100 {
width: 100%;
> button.p-button,
> button.p-button:not(:disabled):hover {
width: 100%;
}
}
a.p-button.green-button.p-component,
a.p-button.p-component:not(:disabled):hover,
p-button.green-button > button.p-button,
p-button.green-button > button.p-button:not(:disabled):hover {
background-color: green;
border-color: green;
padding: 5px 15px;
border-radius: 8px;
> span {
color: white;
font-size: 21px;
}
}
Подробнее здесь: https://stackoverflow.com/questions/798 ... t-on-phone
Мобильная версия