Why isn't contact form 7 mobile compatible?

Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

Use @media rule to change the CSS of the form elements for different screen sizes.??

See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

This is due to CSS styling applied to standard HTML form elements within your current WordPress theme. You could select a WP theme which generates mobile compatible CF7 forms. Alternatively edit the CSS style sheets used by your WordPress theme to change the style of your CF7 form as described by davmerit.

Ok, i’ve been looking over this with Chrome DevTools for the past 2 days and I’ve still haven’t got a clue, sorry. My knowledge of HTML (let alone CSS) is pretty basic.

Do you know how I should edit my CSS style sheets? Thank you. What codes should I add in?

Here is my contact form in HTML:

<div style="margin: 0 auto; width:750px">

<p><b>Your Name:</b><br />
    [text* your-name] </p>

<p><b>Contact Email:</b><br />
    [email* your-email] </p>

<p style="text-align: left;"><b>Beds (Private): </b>[select menu-969 "0" "1" "2" "3" "4"] ?? <b>Beds (Dorm): </b>[select menu-69 "0" "1" "2"] </p> 

<p style="text-align: left;"><b>Check In:</b><br />
[date* date-52] </p>
<p style="text-align: left;"><b>Check Out:</b><br />
[date* date-753] </p>

[recaptcha]

<p>?</p>

<p style="text-align: left;">[submit "Request Booking"]</p>

</div>

To make your form responsive you need to provide responsive CSS styling to the relevant standard HTML form elements, if your theme doesn’t do this.

For basic responsive resizing you can start with something like:

.wpcf7-form {
       width: 100%;
}

.wpcf7-form input,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea, {
    width: 100%;
}

?Add your CSS via Child Theme or use custom CSS plugin.

I did that (like so: https://imgur.com/quD3AMJ), cleared the cache, cleared my mobile’s browser cache and tried again, but the form still isn’t mobile responsive. Did I do something wrong?