Где ошибка в стилях?

Question

[Павел Воронюк]

Всем привет.

Пишу стили, для формы авторизации и получился какой то абсурд!

matrixtel.eu/mikrobill/

На ПК все нормально.

На телефоне что в Safari что в Chrome иконки (логин пароль) сползли вверх, нижний бордер откуда-то берет border-radius.

тыкните пальцем, я походу слепой :/

P.S. взял и прописал border-radius: 0 .. но не люблю прописывать лишние свойства..

Comments

[Максим]

какое у вас изображение тяжёлое - я про фон

[Павел Воронюк]

Максим Жаров: Простите, знаю ( есть предложения как этот фон оптимизировать?)

[Максим]

Павел Воронюк: этого не знаю я , тоже простите , а типа в svg его сделать вариант ? полегче будет

[Сергей Горячев]

Павел Воронюк: Уменьши размер, куда 4к пикселей. Это не сайт, а вход в админку. Сделай 1920х1080.

[Сергей Горячев]

Поправка 1920х1280

[Сергей Горячев]

Павел Воронюк: 1920x1280, качество 80, вес 274,1 кБ (274 146 байт)

[Сергей Горячев]

Павел Воронюк: https://habrastorage.org/files/892/658/880/8926588...

[Павел Воронюк]

Sergey Goryachev: Спасибо) пока сам конвертировал, вы сделали :D а как насчет иконок выровнять на телефонах?)

[Сергей Горячев]

Павел Воронюк: попробуйте добавить -webkit-appearance: none;

Answer 1

[Сергей Горячев]

top: 30px;

.login-input i[class~="fa"] {
    position: absolute;
    right: 15px;
    color: #1ca8ea;
    top: 30px; // добавить top
}

Comments

[Павел Воронюк]

Теперь еще больше не понимаю.. почему в мобильной версии иконки опустились, а на десктопе нет?

[Сергей Горячев]

Павел Воронюк: думаю из-за того, что кнопки на мобильнике получили 100% и вытеснили иконку. А так вы задали точное позиционирование.

[Павел Воронюк]

Sergey Goryachev: но по логике и на десктопе они должны были опустится нет?) чесно впервые такой прикол Оо но главное что работает ;) спасибо)