Title: Responsive form 7 – 2 columns
Last modified: August 22, 2016

---

# Responsive form 7 – 2 columns

 *  [suzE1111](https://wordpress.org/support/users/suze1111/)
 * (@suze1111)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/responsive-form-7-2-columns/)
 * Hi, I have set up a 2 column contact form 7 page. My desktop version looks good,
   tablet looks good but mobile phone it is bad, really bad. i tried quite a few
   things suggested in the forums and posts but nothing has worked. The telephone
   field is not being responsive like the other fields, it sticks out pushing the
   other fields out of alignment.
    I would prefer for the mobile phone version to
   have ONE column with the first column sitting on top and the 2nd column underneath
   all the first column fields and leave the 2 column version for desktop and tablet.
   Can someone please help me sort it out? I have set up a test page at [http://beatfitness.com.au/mobile_form7](http://beatfitness.com.au/mobile_form7)
   so you can see what I mean I would appreciate any help you can give. Thank you
   in advance. Suze
 * [https://wordpress.org/plugins/contact-form-7/](https://wordpress.org/plugins/contact-form-7/)

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

 *  [dccharron](https://wordpress.org/support/users/dccharron/)
 * (@dccharron)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/responsive-form-7-2-columns/#post-5832612)
 * It doesn’t look that bad. I had a look at it in Firefox => Developer => Responsive
   Design View on small sizes of screens. The main issue is that your labels are
   folding which is pushing down the input box for some fields.
 * As for changing it from two columns to one column based on screen size, I have
   no idea how to do that.
 * One thought is to use “div” instead of “table”. Div’s are more responsive. I’d
   also be studying how to use `@media` in your CSS. For example,
 *     ```
       @media (min-width: 600px) {
         .myclass {
         }
       }
       ```
   
 * There’s also a max-width of this. This is screen size sensitive CSS which is 
   sort of what you are looking for. You might try to shrink your labels when viewed
   on tiny screens. I don’t think you want to shrink your input boxes too much as
   they’ll be hard to use.
 *  Thread Starter [suzE1111](https://wordpress.org/support/users/suze1111/)
 * (@suze1111)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/responsive-form-7-2-columns/#post-5832706)
 * Many thanks dchharron, will see how it goes. Would still like to have 2 columns
   reduce to one on mobile devices if any knows how?
 *  [Neil Murray](https://wordpress.org/support/users/buzztone/)
 * (@buzztone)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/responsive-form-7-2-columns/#post-5832746)
 * See [Styling Contact Form](http://contactform7.com/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.

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

The topic ‘Responsive form 7 – 2 columns’ 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/)

 * 3 replies
 * 3 participants
 * Last reply from: [Neil Murray](https://wordpress.org/support/users/buzztone/)
 * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/responsive-form-7-2-columns/#post-5832746)
 * Status: not resolved