Как изменить размер текстового поля, используя медиа-запросы?

Ответственная форма контакта работает правильно для textarea, но не для input type=text полей на меньших экранах. Я попробовал добавить медиа-запросы.Как изменить размер текстового поля, используя медиа-запросы?

Вот мой код:

  <!doctype html> 
      <html> 
      <head> 
      <meta charset="UTF-8"> 
      <title></title> 
      <style> 
      .contact-form { 
       line-height: 1.4; 
       width: 50%; 
       margin: 0 auto; 
      } 
      .form-group { 
       background: #F6DDCE; 
       margin-bottom: 1em; 
       padding: 10px; 
      } 
      .form-group ul { 
       list-style: none; 
       margin: 0 0 2em; 
       padding: 0; 
      } 
      .form-group li { 
       margin-bottom: 0.5em; 
      } 
      .form-group h3 { 
       margin-bottom: 1em; 
      } 
      .form-fields input[type="text"], 
      .form-fields input[type="email"]{ 
      box-sizing: border-box; 
      padding: 0.6em 0.8em; 
      color: #999; 
      background: #f7f7f7; 
      border: 1px solid #e1e1e1; 
      overflow: hidden; 
      text-overflow: ellipsis; 
      white-space: nowrap; 
      font-size: 0.9em; 
      text-decoration: none; 
      line-height: normal; 
      max-height: 3em; 
      } 
      .form-fields input[type="text"]:focus, 
      .form-fields input[type="email"]:focus, 
      .form-fields textarea:focus { 
      color: #333; 
      border: 1px solid #C17CCF; 
      outline: none; 
      background: #f2f2f2; 
      } 
      .form-fields textarea { 
       display: block; 
       box-sizing: border-box; 
       font: 0.9em Lato, Helvetica, sans-serif; 
       width: 100%; 
       height: 6em; 
       overflow: auto; 
       padding: 0.6em 0.8em; 
       color: #999; 
       background: #f7f7f7; 
       border: 1px solid #e1e1e1; 
       line-height: normal; 
      } 
      .form-fields label{ 
       text-align: left; 
      } 
      .send-btn { 
       border-radius: 0px 2px 2px 0px; 
       box-sizing: content-box; 
       background: #8B798C; 
       font-weight: 300; 
       text-transform: uppercase; 
       color: white; 
       padding: 0.35em 0.75em; 
       border: none; 
       font-size: 1.1em; 
       text-decoration: none; 
       cursor: pointer;  
      } 
      .send-btn:hover, .send-btn:focus { 
       background: #C17CCF; 
      } 
      /*flex it*/ 
      .send-form { 
       display: flex; 
       flex-wrap: wrap; 
       } 
      .form-group { 
       flex: 1 0 300px; 
      } 
      .form-submit { 
       flex: 0 0 100%; 
      } 
      .form-fields li { 
       display: flex; 
       flex-wrap: wrap; 
      } 
      .form-fields input[type="text"], 
      .form-fields input[type="email"]{ 
       flex: 1 0 230px; 
      } 
      .form-fields label { 
       flex: 1 0 90px; 
       } 


      /* Adding media queries*/ 

      @media (max-width: 400px) { 
      body { 
       width: 100%; 
       margin: 0; 
       padding: 0 0 2em; 
      } 
      header, .form-submit { 
       padding: 2% 5%; 
      } 
      } 
      </style> 
      </head> 
      <body> 
      <header> 
      </header> 
      <form class="contact-form"> 
      <section class="form-group"> 
      <h3>Contact Us</h3> 
      <ul class="form-fields"> 
      <li><label for="name">Name:</label> <input type="text" name="name" id="name" placeholder="your full name" class="text-input"></li> 
      <li><label for="subject">Subject:</label> <input type="text" name="subject" id="subject" placeholder="subject" class="text-input"></li> 
      <li><label for="email">Email:</label> <input type="email" name="email" id="email" placeholder="confirmation email" class="text-input"></li> 
      <li><label for="comments">Comments:</label><textarea id="comments" name="comments" class="text-area">comments</textarea> </li> 
      </ul> 
      </section> 
      <section class="form-submit"> 
      <button type="submit" class="send-btn">Send</button> 
      </section> 
      </form> 
      </body> 
      </html>

источник

2016-10-03 Aakrisha Agarwal

Это из-за гибкого имущества flex: 1 0 230px; для полей ввода. Переопределите его с помощью max-width: 100%; в контрольных точках запросов мультимедиа.

Вот fiddle:

.form-fields input[type="text"], 
.form-fields input[type="email"] { 
    max-width: 100%; 
}

источник

2016-10-03 09:58:19 vivek

я раньше добавив код выше, но точка останова была 400px. Так что это не сработало. Тот же набор кода работает с 768px. Это означает, что очень важно установить правильные точки останова. Большое спасибо .... –

@AakrishaAgarwal Pls принимает его как ответ, если он вам поможет. – vivek

Как изменить размер текстового поля, используя медиа-запросы?

ответ

Смежные вопросы