CODEWITHSUNDEEP
wordpresscsscontact-form-7
Emigriff
Emigriff

Reputation: 197

Fix Contact Form 7 Fields on Mobile

I am using Contact Form 7 for a form in a right column on this page http://ernielovespizza.com/get-in-touch/

It looks fine on desktop/tablet but on mobile the "NAME" and "EMAIL" fields extend past the screen on the right but the "MESSAGE" field is fine.

Does anyone know why this happens and what a fix could be?

This is my form code:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

At the moment I don't have any specific CSS for it. I used Visual Composer to build the website also.

Upvotes: 3

Views: 11040

Answers (3)

JohnH
JohnH

Reputation: 2133

Short answer: add "width: 100%;" line to the CSS selector of "input, textarea, select, .seldiv, .select2-choice, .select2-selection--single".

Long answer: here are some steps to follow using Chrome's Inspect function to figure out this display problem.

  • Step 1) View your display with the Chrome browser and do a right-click and select "Inspect".
  • Step 2) Click on the toggle device icon to get a smartphone display.

enter image description here

  • Step 3) Choose a display type applicable to your problem. (I chose "Samsung 5" because that seemed to look more like the problem that was described.) This image shows the email input textbox being wider than the message textarea.

enter image description here

  • Step 4) Look around in the "Styles" panel to see if width related differences can be seen that would cause the textarea width to be OK and not the textboxes. I noticed that the textarea had some CSS that defined its width to be 100% that I did not see for the other input elements. So I disabled that in Inspect to see what would happen.

enter image description here

  • Step 5) View what happens as you make adjustments in Inspect. (Several trial and error attempts may be needed for this.) Note that the textarea now has the same width problem with the width: 100%; disabled.

enter image description here

  • Step 6) Try to add the "width: 100%;" so that it also applies to the input textboxes. This was done as shown in the following image. Note that though the width line was crossed out (due to other CSS definitions), this change seemed to produce the desired result.

enter image description here

  • Step 7) View the display. If it looks OK, try to make the applicable change to your CSS definitions, then re-test the change.

enter image description here

Also, explore different options in Chrome's Inspect tool; it is very useful for diagnosing display issues and trying out solutions before doing any CSS edits.

Good luck.

Upvotes: 3

Adern Nerk
Adern Nerk

Reputation: 330

Assuming the input type is text (change it as necessary). This code will do the trick,

<style>
input[type=text]
{
/* change as necessary */
max-width:500px;
min-width:250px;
/* this will resize input box if width between 500-250 */
width:100%;
}
</style>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

You can add this rule to your custom CSS:

.wpcf7 input {
  max-width: 100% !important;
}

You might not need the !important (try it without that first), but if it doesn't work without that, add it.

Upvotes: 7

Related Questions