Responsive form 7 – 2 columns

  • suzE1111

    (@suze1111)


    10 years ago

    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 https://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://www.ads-software.com/plugins/contact-form-7/

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

    (@dccharron)

    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

    (@suze1111)

    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?

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsive form 7 – 2 columns’ is closed to new replies.