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

Question

[Артём Ряженков]

В общем, я работал с плагином для Wordpress - Contact Form 7, и у меня появился вопрос - а как сделать такую форму адаптивной? На маленьком экране поля для ввода просто не работают. Стили на форму никакие не наложены.

<div class="col-lg-12">
<div class="col-lg-2">
    [text* text-123 placeholder "Введите имя"] </div> 

<div class="col-lg-2">
    [email* email-676 placeholder "Введите email"] </div>

<div class="col-lg-2">
    [select* menu-812 "Тип работы" "Реферат" "Курсовая работа" "Контрольная работа" "Задача"] </div>
<div class="col-lg-2">
  [tel tel-124 "Введите телефон"]
</div>
<div class="col-lg-4">
[text* text-401 "Описание"]
</div>
<div class="col-lg-12">
[submit placeholder "Заказать работу"] </div>
</div>

Заранее спасибо!

Answer 1

[Николай Романов]

стилями можно устанавливать ширину формы как в px так и в %. Я делаю отдельный див вокруг все формы задаю ширину. А сама форма резиновая если ширину задать в % для форм.

.wpcf7 input, .wpcf7 textarea {
width: 90%;
}

В сети куча готовых CSS под СF 7. Можешь и сам написать

Comments

[Артём Ряженков]

Но это не решает проблему с тем, что на маленьких экранах форма не работает - поля для ввода при нажатии никак не реагируют

[Николай Романов]

не сталкивался все формы на мобилах нормально отображаются

Answer 2

[Орхан Гасанлы]

Здравствуйте!

Для адпвтивности используйте медиа запросы. Как отметил meekes, можно создать уник. идентификатор вокруг формы и использовать для кастомизации.

Что касается вопроса о том, почему у вас в моб. версии поля некликабельны, то ищите другие причины. Тут дело не в адаптивности. Например, ошибки в консоли, скрипты, проверьте в разных браузерах.

Comments

[Артём Ряженков]

Тайна некликабельности так и не была разгадана, но проблему решить удалось - в представленном коде надо было убрать верхний первый тег. Как и всегда, проблема решается методом тыка)