Fly_Lakmey
-
Posts
1 -
Joined
-
Last visited
Fly_Lakmey's Achievements
Explorer (1/14)
0
Reputation
-
Данная страница ужастно отображается на Iphon и Ipad - http://admin.siteboom.ru/login.php# Все тесты оно проходит хорошо.. При уменьшение окна браузера тоже нормально. Не могу понять почему на мобилах так плохо. <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>Введите пароль - SiteBoom</title> <link rel="stylesheet" type="text/css" href="style/login.css"/> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"> </head> <body> <div class="main"> <div class="form"> <div class="form--ava"> <img src="https://pbs.twimg.com/profile_images/833738015881228289/YkbMZhVJ_400x400.jpg" alt="ava"> </div> <div class="form--desc"> <input type="password" placeholder="Пароль"> <button>Войти</button> <a href="#">Забыл пароль?</a> </div> </div> </div> </body> </html> * { margin: 0; padding: 0; } body { font-family: 'Roboto Regular', sans-serif; background-image: url('http://bit.ly/2gPLxZ4'); background-size: cover; background-attachment: fixed; display: flex; align-items: center; justify-content: center; height: 100vh; } .main { background: inherit; width: 250px; height: 300px; position: absolute; overflow: hidden; /*добавил новое правило*/ border-radius: 5px; } .main:before { content: ''; width: 300px; height: 400px; background: inherit; position: absolute; left: -25px; top: -25px; box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.3); filter: blur(10px); } .form { position: relative; display: flex; justify-content: center; align-items: center; z-index: 30; text-align: center; } .form--ava { position: absolute; top: 30px; } .form--ava img { width: 90px; height: 90px; border-radius: 50%; } .form--desc { /*position: absolute;*/ display: flex; flex-direction: column; position: absolute; top: 140px; align-items: center; } .form--desc input { background: 0; border: none; border-radius: 0; border-bottom: 1px solid #fff; color: #fff; height: 40px; outline: none; font-size: 16px; margin-bottom: 20px; } .form--desc input::placeholder { color: #ffffff; font-size: 16px; } .form--desc button { background-color: #df2359; color: #fff; border: none; width: 100%; height: 40px; font-size: 14px; text-transform: uppercase; border-radius: 5px; } .form--desc button:hover { background-color: #b31d47; cursor: pointer; } .form--desc a { font-size: 12px; color: #fff; text-decoration: none; margin-top: 20px; }