Кнопка заполнения выглядит даже в инспекторе браузера, но не на телефонеCSS

Разбираемся в CSS
Ответить
Anonymous
 Кнопка заполнения выглядит даже в инспекторе браузера, но не на телефоне

Сообщение Anonymous »

Каждый раз, когда я по какой-то причине пишу кнопку запуска в инспекторе браузера (даже если она отображается на телефоне), отступ (или текст) кнопки выглядит по центру:
Изображение

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

Почему это происходит? Вот все части указанной проблемы:
Html-структура родительского узла и самих кнопок:

Код: Выделить всё








@if(loginForm.getError('loginFailed')) {

{{ loginForm.getError('loginFailed') }}

}
label="Iniciar Sesión"
class="green-button w-100"
(onClick)="submitLoginForm()"
/>


Правила Scss родительского узла:

Код: Выделить всё

@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;
}
Правила Scss для зеленой кнопки (правила для кнопки с контуром такие же, но цвета меняются):

Код: Выделить всё

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;
}
}
Есть ли какие-то особенности браузера телефона Chrome, о которых мне следует знать? Я использую последнюю версию Chrome для Android 16

Подробнее здесь: https://stackoverflow.com/questions/798 ... t-on-phone
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»