Как сделать адаптивную форму на разных устройствах?

Question

[hsnz]

Ребята, всем привет.
Помогите пожалуйста сделать адаптивную форму на разных устройствах.
На данный момент код:

#email-partner {
  width: 30%;
  background: #3c3733;
  font-family: 'Arial, Helvetica', sans-serif;
  color: #FFF;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px 0 0 5px;
}

#submit-partner {
  width: 15%;
  height: 46px;
  background: #a73e5c;
  font-family: 'Arial, Helvetica', sans-serif;
  font-weight: bold;
  color: #FFF;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
}

Comments

[Froggyweb]

А ХТМЛ где? лучше выложить на codepen

[hsnz]

https://codepen.io/hsnz/pen/ZKVZVJ

Answer 1

[Иван]

1) Использовать id в верстке плохой тон,но есть исключения.

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

3) Используй медиа-запросы,емое,это же просто,почитай про адаптив...

Answer 2

[Alibek Kulseitov]

А как форма должна выглядеть?

Answer 3

[silencer-spirit]

1) Как сказали ранее использовать id для стилей очень плохой тон.
2) Если нужно сделать адаптивным инпут (тип - текст), то задайте ему max-width как у Вас в макете и width: 100%.