Title: Make 2 column form responsive
Last modified: August 22, 2016

---

# Make 2 column form responsive

 *  [Scott Pfau](https://wordpress.org/support/users/scott-pfau/)
 * (@scott-pfau)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/make-2-column-form-responsive/)
 * I am trying to make my 2 column form responsive. Any help would be greatly appreciated.
 * [http://6studio6.com/mpoweredit/contact/](http://6studio6.com/mpoweredit/contact/)
 * **Form Code:**
 * <div id=”two-column”>
    <div id=”left”> <p>Your Name (required) [text* your-name
   placeholder “Your Name”] </p> <p> Company Name [text company-name placeholder"
   Company Name"]</p> <p>Your Email (required) [email* your-email placeholder “email”]
   </p>
 * </div>
 * <div id=”right”>
    <p> Phone Number [tel telephone /12 placeholder “555-555-5555”]
   </p> <p> Best Time to Call [radio call-time “Morning” “Afternoon” “Evening”]</
   p> </div>
 * <div id=”clear-float”>
    <p>Your Message [textarea message placeholder “Message”]
   </p> <p>Please enter the following code before submitting your message. [captchac
   captcha-939 size:m][captchar captcha-939 8/8]</p> <p><input type=”reset” class
   =”wpcf7-reset” />[submit “Send”]</p> </div>
 * </div>
 * **CSS for the form**
 * #two-column{
    width: 100%; }
 * #two-column #left {
    width: 75%; float: left; } #two-column #right { width: 25%;
   float: left; }
 * #two-column #clear-float {
    clear: both; }
 * .wpcf7-form-control-wrap input[type=”text”], .wpcf7-form-control-wrap textarea,.
   wpcf7-form-control-wrap select {
    background: #F7F7F7 url(epanel/page_templates/
   images/contact_input.png) repeat-x !important; border: 1px solid #CCC !important;
   color: #111 !important; padding: 8px !important; border-radius: 8px !important;-
   webkit-border-radius: 8px !important; -moz-border-radius: 8px !important; margin:
   0px !important; font-family: arial !important; }
 * .wpcf7-form-control-wrap input[type=”email”], .wpcf7-form-control-wrap textarea,.
   wpcf7-form-control-wrap select {
    background: #F7F7F7 url(epanel/page_templates/
   images/contact_input.png) repeat-x !important; border: 1px solid #CCC !important;
   color: #111 !important; padding: 8px !important; border-radius: 8px !important;-
   webkit-border-radius: 8px !important; -moz-border-radius: 8px !important; margin:
   0px !important; font-family: arial !important; }
 * .wpcf7-form-control-wrap input[type=”tel”], .wpcf7-form-control-wrap textarea,.
   wpcf7-form-control-wrap select {
    background: #F7F7F7 url(epanel/page_templates/
   images/contact_input.png) repeat-x !important; border: 1px solid #CCC !important;
   color: #111 !important; padding: 8px !important; border-radius: 8px !important;-
   webkit-border-radius: 8px !important; -moz-border-radius: 8px !important; margin:
   0px !important; font-family: arial !important; }
 * .wpcf7-form-control-wrap select {
    background:#F7F7F7 !important; }
 * .wpcf7-form-control-wrap input[type=”text”] {
    margin-left: auto; margin-right:
   auto; width: 90%; }
 * .wpcf7-form-control-wrap input[type=”email”] {
    margin-left: auto; margin-right:
   auto; width: 90%; }
 * .wpcf7-form-control-wrap input[type=”tel”] {
    width:95%; }
 * .wpcf7-form-control-wrap textarea {
    margin-left: auto; margin-right: auto; width:
   95%; }
 * .wpcf7-captchar, .wpcf7-quiz {
    width:15% !important; }
 * span.wpcf7-list-item {
    display: block; margin-left: 0 !important; }
 * .wpcf7-submit, .wpcf7-reset {
    border: 0px !important; color: #ffffff !important;
   float: left; font-size: 14px; text-transform: uppercase; margin-right: 9px; height:
   32px; }
 * .wpcf7-submit {
    border-radius: 8px !important; background-color:#e4571f; width:
   10%; margin-right: 6px; }
 * .wpcf7-reset {
    border-radius: 8px !important; background-color:#e4571f; width:
   10%; }
 * [https://wordpress.org/plugins/contact-form-7/](https://wordpress.org/plugins/contact-form-7/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [Scott Pfau](https://wordpress.org/support/users/scott-pfau/)
 * (@scott-pfau)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/make-2-column-form-responsive/#post-5182164)
 * Anyone have any ideas on this. I’ve tried everything I can think of to make the
   form responsive but it doesn’t seem to work. I am more of a designer than coder
   so any help would be greatly appreciated.
 * Thank you
 *  [Stagger Lee](https://wordpress.org/support/users/stagger-lee/)
 * (@stagger-lee)
 * [11 years, 10 months ago](https://wordpress.org/support/topic/make-2-column-form-responsive/#post-5182166)
 * It is responsive. Works as it is meant to work. Put in css your media queries
   to give columns 100% width at some screen sizes.
 * You cant squeeze in infinite that it is not meant to look good when squizeed.
 * Something like this, only for inspiration:
 * > [@media](https://wordpress.org/support/users/media/) (min-width: 300px) and(
   > max-width: 1000px) {
   >  #two-column #left { width: 100% !important; } }

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Make 2 column form responsive’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

## Tags

 * [2-column](https://wordpress.org/support/topic-tag/2-column/)

 * 2 replies
 * 2 participants
 * Last reply from: [Stagger Lee](https://wordpress.org/support/users/stagger-lee/)
 * Last activity: [11 years, 10 months ago](https://wordpress.org/support/topic/make-2-column-form-responsive/#post-5182166)
 * Status: not resolved