Закругленные углы при вводе текста исчезают в мобильном представлении - PullRequest
Новая
       11

Закругленные углы при вводе текста исчезают в мобильном представлении

0 голосов
/ 01 октября 2018

Я работаю над адаптивным проектом веб-сайта, и я решил скруглить углы некоторых элементов div, кнопок и полей ввода, используя атрибут border-radius.

Все выглядит великолепно, кроме одного из потерь при вводе текстаполовина его закругленных углов (справа), когда я вхожу в мобильный режим.

Может кто-нибудь подсказать мне, почему это может происходить?

Вот часть моего кода: 

<!--HTML-->

<section id="newsletter">
    <div class="container">
        <h1>Subscribe to our Newsletter</h1>
        <form>
            <input type="email" placeholder="Enter Email...">
            <button type="submit" class="button1">Subscribe</button>
        </form>
    </div>
</section>

/* CSS */

#newsletter input[type="email"]{
padding: 4px;
height: 25px;
width: 250px;
border-radius: 12px;
}

.button1{
height: 38px;
background: #e8491d;
border: none;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
border-radius: 12px;
}

.container{
width: 80%;
margin: auto;
overflow: hidden;
}

@media(max-width: 768px){
#newsletter h1,
#newsletter form{
    float: none;
    text-align: center;
    width: 100%;
}

#newsletter button{
    display: block;
    width: 100%;
}

#newsletter form input[type="email"]{
    width:100%;
    margin-bottom: 5px;
}
}

Спасибо!Дэнни

1 Ответ

0 голосов
/ 01 октября 2018

На самом деле, он ничего не теряет - он просто переполняется.И с переполнением: скрыто, что у вас есть, оно просто скрыто.

Проблема, с которой вы сталкиваетесь, заключается в том, что ввод имеет отступ, поэтому вам нужно это правило css; 

* {
       box-sizing: border-box;
  }

Это означает, что вывключая отступы и границы в общей ширине и высоте элемента.(* означает все элементы).Это исправит много странного неожиданного поведения для вас в будущем.(Вы должны взглянуть на сброс CSS).

Удачного кодирования!

...