Адаптивная ширина полей Contact Form 7

Как сделать ширину полей плагина Contact Form 7 адаптивной?

Документация плагина контактной формы Contact Form 7 предлагает настройки ширины полей ввода информации с фиксированной шириной. В этом случае на мобильных устройствах поля могут заползать за края экрана.
Для решения этой проблемы, можно использовать медиа-запросы @media, и подстроить ширину или любые другие параметры формы под любые разрешения экрана.
Достаточно добавить в таблицу CSS нужные вам параметры.
Допустим зададим ширину полей 80% от пространства экрана для устройств со следующими разрешениями экрана:

@media only screen and (max-width : 767px) {.wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="text"] {
width: 80%;}}

@media only screen and (max-width : 600px) {.wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="text"] {
width: 80%;}}

@media only screen and (max-width : 480px) {.wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="text"] {
width: 80%;}}

@media only screen and (max-width : 360px) {.wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="text"] {
width: 80%;}}

max-width — максимальная ширина экрана устройств для которых будет применена функция.

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

Написать