WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Making Contact Form 7 Responsive (7 posts)

  1. Odinkinder
    Member
    Posted 1 year ago #

    I have been working on a new child theme based on 2012. It is finished for the most part, but I have noticed the text area in Contact Form 7 is not resizing to fit when at the iPhone/Android screen sizes. Is there a fix for this?

    T.

    http://wordpress.org/extend/plugins/contact-form-7/

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 1 year ago #

    Edit the CSS in your theme to add a style of 100% width for textarea.

  3. Odinkinder
    Member
    Posted 1 year ago #

    Thank you Takayuki,

    I will see if I can get that to work, and let you know.

    T.

  4. Odinkinder
    Member
    Posted 1 year ago #

    Yes, that did work. Thank you Takayuki.

    Here is the code I used.

    textarea {
    	width: 90%;
    }

    I did not use 100%, it came too close to the edge of the IPhone simulator I was using. At 90%, the text area matches the size of the forms above it.

    T.

  5. EvertRuisch
    Member
    Posted 1 year ago #

    Can you specify which file you have modified and about where? I was looking for the same solution.

  6. Odinkinder
    Member
    Posted 1 year ago #

    Sure Evert,

    The change is to your theme's style .css file, just slip the code in at the bottom and save the file. Find the last code closing tag } add at least one key return, and put the code on that line. I would make a copy of your original CSS file before doing the change just incase you break something. LOL!

    In my case, I am working with a child theme, so I put the code in the child theme's style.css file, if you are using a child theme, do the same.

    Just test drive all of your changes before calling it a day when you are done.

    Good luck,

    T.

  7. jakobemils
    Member
    Posted 8 months ago #

    I tried your advice.
    However on IOS the contact form 7 acts pretty strange.
    If you have an Iphone please try this link:

    Is it possible to make it more "smooth" and responsive?
    I use ifeaturepro 5 by the way.

    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic