Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

responsive contactform 7 2 columns WordPress

  • SOLVED

Hi! I have a 2 column contactform 7. I need to have it responsive for my mobile view.

the second columns should be under the first one in mobile view (iphone etc). I don't know how to do it... any ideas?

please check:

alpha.peitzner.com/kontakt


Answers (3)

2014-01-06

Balanean Corneliu answers:

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

textarea {
width: 90%;
}


or

textarea {
width: 100%;
}
depends of your wish.


Balanean Corneliu comments:

Better you can use :

style.css:


div.wpcf7 .wpcf7-form-control { max-width: 100%; }


Balanean Corneliu comments:

Back with full code and description:

1. Open up your theme's style.css file, and
2. Add the following CSS:

@media screen and (max-width: 599px) {

.wpcf7-form-control {
width: 95% !important;
}

.wpcf7-form-control.wpcf7-submit {
font-size: 18px;
font-size: 1.286rem;
padding: 14px 0;
padding: 1rem 0;
}
}



if you whant the submit button to be smaller to can add:

.wpcf7-submit {
width: 50%;
}



klaus dyba comments:

Great! Worked so far! One thing. Please see attachment screenshot of my phone view.

the email box has perfect width and padding, but the others are shorter. Any idea why?