CSS Flexbox Входы не реагируют - PullRequest
Новая
       9

CSS Flexbox Входы не реагируют

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

Я новичок в flexbox и css. Мне нужна помощь, чтобы этот код работал. Проблема заключается в следующем, я не могу сделать ввод, текстовое поле и кнопку, чтобы реагировать. Мне нужно, чтобы они были такого же размера на обычной странице компьютера, но были бы меньше и отзывчивее на мобильных устройствах. Любой совет, помогите мне. Большое спасибо 

.email{
      padding: 0.5% 0% 0.5% 0%;
      display: flex;
      align-items: center;
      flex-flow: column;
      
    }
    
    .email >div{
      margin: 10px 0px 10px 0px;
    }
    
    input {
      padding: 15px;
      width: 402px;
      max-width: 402px;
      box-sizing: border-box;
     
      border: 1px solid #272525;
      font-size: small;
      
    }
    ::placeholder { 
      font-size: 14px ;
      opacity: 1; 
    
    }
    
    textarea{
      padding: 15px;
      width: 402px;  
      resize: vertical;
      font-size: small;
      border: 1px solid #272525;
    }
    .button-send{
      width: 434px;
      height: 40px;
      background-color: black;
      color: white;
      font-size: 15px;
      font-size: small;
      
    }
<div class="email">
    <div>
       <input type="text" placeholder="Name">
    </div>
    <div>
        <input type="text" placeholder="Email*">
    </div>
    <div>
        <textarea rows="10" placeholder="Message*"></textarea>
    </div>
    <div>
    <button class="button-send">Send  </button>
    </div> 
</div>

Ответы [ 2 ]

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

вы можете добавить @ media querie s в Css, как я это сделал для вас ниже: -

Нажмите Выполнить фрагмент кода , а затем Полный pag e и уменьшите ваше окно и отметьте it 

.email {
  padding: 0.5% 0% 0.5% 0%;
  display: flex;
  align-items: center;
  flex-flow: column;
}

.email>div {
  margin: 10px 0px 10px 0px;
}

input {
  padding: 15px;
  width: 402px;
  max-width: 402px;
  box-sizing: border-box;
  border: 1px solid #272525;
  font-size: small;
}

::placeholder {
  font-size: 14px;
  opacity: 1;
}

textarea {
  padding: 15px;
  width: 402px;
  resize: vertical;
  font-size: small;
  border: 1px solid #272525;
}

.button-send {
  width: 434px;
  height: 40px;
  background-color: black;
  color: white;
  font-size: 15px;
  font-size: small;
}

@media only screen and (max-width: 600px) {
  input {
    width: 200px;
    max-width: 200px;
  }
  textarea {
    width: 200px;
    max-width: 200px;
  }
  button {
    width: 200px;
    max-width: 200px;
  }
}
<body>

  <div class="email">
    <div>
      <input type="text" placeholder="Name">
    </div>
    <div>
      <input type="text" placeholder="Email*">
    </div>
    <div>
      <textarea rows="10" placeholder="Message*"></textarea>
    </div>
    <div>
      <button class="button-send">Send  </button>
    </div>
  </div>
</body>
0 голосов
/ 01 октября 2019

В этом случае вам необходимо изменить значения CSS исключительно для экранов небольшого размера, но при этом сохранить конкретные значения для экрана другого размера, а затем использовать медиазапросы.

Итак, во-первых, что такое медиазапрос?

Медиа-запрос состоит из типа мультимедиа и нуля или более выражений, которые проверяют условия определенных функций мультимедиа.

https://www.w3.org/TR/css3-mediaqueries/

Iсоветую прочитать этот документ, чтобы лучше понять, что на самом деле представляют собой медиа-запросы.

Но в ответ на ваш вопрос, чтобы иметь отзывчивые текстовые области, вы хотели бы добавить что-то вроде этого (вы также можете простоиспользуйте max-width, изменив ширину на 100% и установив для max-width значение width.); 

.email {
  padding: 0.5% 0% 0.5% 0%;
  display: flex;
  align-items: center;
  flex-flow: column;
}

.email>div {
  margin: 10px 0px 10px 0px;
}

input {
  padding: 15px;
  width: 402px;
  max-width: 402px;
  box-sizing: border-box;
  border: 1px solid #272525;
  font-size: small;
}

::placeholder {
  font-size: 14px;
  opacity: 1;
}

textarea {
  padding: 15px;
  width: 402px;
  resize: vertical;
  font-size: small;
  border: 1px solid #272525;
}

.button-send {
  width: 434px;
  height: 40px;
  background-color: black;
  color: white;
  font-size: 15px;
  font-size: small;
}

@media all and (max-width:500px) {
  textarea,.button-send,input  {
    width: 100%;
  }
}
<div class="email">
  <div>
    <input type="text" placeholder="Name">
  </div>
  <div>
    <input type="text" placeholder="Email*">
  </div>
  <div>
    <textarea rows="10" placeholder="Message*"></textarea>
  </div>
  <div>
    <button class="button-send">Send  </button>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...