Diferent web mobile version

Hello, I am using a contact form with two columns but in the mobile version it looks bad. It is possible that only for the mobile version another different form will be shown, designed with only one column??

My website is http://orquestasinclusivas.com/inscribete/

Thanks in advance!

Hello there,

No need second form, I think. To make the existing one responsive, add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .wpcf7-form .column-half input {
      max-width: 100%;
    }

Regards,
Kharis

Hi kharis, It’s true your code works. But the fields are disordered. Maybe it’s badly designed. You have to see column 1 and below column two. And they are interleaved :frowning:

This is the code that I am using.

/*
Formulario CF7 a 2 columnas responsive
*/
#responsive-form{
 max-width:600px /*-- change this to get your desired form width --*/;
 margin:0 auto;
        width:100%;
}
.form-row{
 width: 100%;
}
.column-half, .column-full{
 float: left;
 position: relative;
 padding: 0.65rem;
 width:100%;
 -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
 content: "";
 display: table;
 clear: both;
}
 
/**---------------- Media query ----------------**/
@media only screen and (min-width: 37.5em) { 
 .column-half{
 width: 50%;
 }
}

.wpcf7-form .column-half input {
      max-width: 100%;
    }

Thank you very much!

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (min-width: 320px) and (max-width: 600px) {
  .wpcf7-form .column-half {
    width: 50%;
  }
}

Regards,
Kharis

Thank you Kharis, its work perfect. And to finish, can I delete something from the code that I sent you?

Regards!

You’re welcome!

Not quite sure. But you can delete it after make a CSS code backup.

Regards,
Kharis