How to make Contact Form 7 responsive?

Question

Layout

In general, I was working with a plugin for Wordpress - Contact Form 7, and I had a question - how to make such a form adaptive? On a small screen, input fields just don't work. There are no styles applied to the form.

<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>

Thanks in advance!

Answer 1

With styles, you can set the width of the form both in px and in%. I make a separate div around all forms and set the width. And the form itself is rubber if the width is set in% for the forms.
.wpcf7 input, .wpcf7 textarea {
width: 90%;
}
There are a lot of ready-made CSS for CF 7 on the net. You can write it yourself

Answer 2

Hello!
For responsiveness, use media queries. As noted by meekes, you can create unique. identifier around the form and use for customization.
As for the question of why you have a mob. field versions are not clickable, then look for other reasons. It's not about adaptability. For example, errors in the console, scripts, check in different browsers.