Form 2 columns on desktop, 1 on mobile

[newki]

Hello,

I’ve built the form properly on desktop, but it remains on 2 columns on mobile. What did I do wrong?
Thanks for your help!
Nice day

[Kyle – SUPPORT]

Hi

You have this in your custom css:

.wpcf7 form.wpcf7-form p.firstname,
.wpcf7 form.wpcf7-form p.name,
.wpcf7 form.wpcf7-form p.phone,
.wpcf7 form.wpcf7-form p.email,
.wpcf7 form.wpcf7-form p.company,
.wpcf7 form.wpcf7-form p.jobtitle,
.wpcf7 form.wpcf7-form p.country2,
.wpcf7 form.wpcf7-form p.city,
.wpcf7 form.wpcf7-form p.sector {
float:left;
width:47%;
}
.wpcf7 form.wpcf7-form p.subject,
.wpcf7 form.wpcf7-form p.country,
.wpcf7 form.wpcf7-form p.need,
.wpcf7 form.wpcf7-form p.experience,
.wpcf7 form.wpcf7-form p.exp-type,
.wpcf7 form.wpcf7-form p.sector2,
.wpcf7 form.wpcf7-form p.motivations,
.wpcf7 form.wpcf7-form p.message,
.wpcf7 form.wpcf7-form p.cv {
float:right;
width:47%;
}

You should put it in a media query:

@media only screen and (min-width: 768px) { 
.wpcf7 form.wpcf7-form p.firstname,
.wpcf7 form.wpcf7-form p.name,
.wpcf7 form.wpcf7-form p.phone,
.wpcf7 form.wpcf7-form p.email,
.wpcf7 form.wpcf7-form p.company,
.wpcf7 form.wpcf7-form p.jobtitle, 
.wpcf7 form.wpcf7-form p.country2, 
.wpcf7 form.wpcf7-form p.city, 
.wpcf7 form.wpcf7-form p.sector {
	float:left;
	width:47%;
}
.wpcf7 form.wpcf7-form p.subject,
.wpcf7 form.wpcf7-form p.country,
.wpcf7 form.wpcf7-form p.need,
.wpcf7 form.wpcf7-form p.experience,
.wpcf7 form.wpcf7-form p.exp-type,
.wpcf7 form.wpcf7-form p.sector2,
.wpcf7 form.wpcf7-form p.motivations,
.wpcf7 form.wpcf7-form p.message,
.wpcf7 form.wpcf7-form p.cv {
	float:right;
	width:47%;
}
}

– Kyle

[newki]

Thanks a lot Kyle, I’ve learnt something today!
Nice WE!

[Kyle – SUPPORT]

No problem 🙂

[newki]

Ah one thing I’ve just noticed, the fields are not in the right order : I wanted all the left fields first and then the right fields.
Here, I have left, right, left right, so the “message” fields is before “your job or your title”.
Can I fix this easily?

[Kyle – SUPPORT]

It will be in the order you have set them up in the form. You will need to create 2 divs (columns), for left and right, and float them left and right instead of the input fields

– Kyle

[newki]

OK will try this, thanks!

[newki]

I’ve put this :

<div class=contact-left">
<p class="name">Nom *<br />
    [text* your-name] </p>
<p class="firstname">Pr&eacute;nom *<br />
    [text* your-first-name] </p>
<p class="email">Email *<br />
    [email* your-email] </p>
<p class="phone">Téléphone<br />
    [text your-phone] </p>
<p class="company">Société<br />
    [text your-company] </p>
<p class="jobtitle">Fonction<br />
    [text your-jobtitle] </p>
</div>
<div class="clear"></div>	
<div class=contact-right">
<p class="subject">Sujet<br />
    [text your-subject] </p>
<p class="message">Message *<br />
    [textarea* your-message] </p>
</div>
<div class="clear"></div>

<p class="submission">[submit "Envoyer"]</p>

and

@media only screen and (min-width: 768px) { 
.contact-left {
	float:left;
	width:47%;
}
.contact-right {
	float:right;
	width:47%;
}
}

It’s OK on mobile but on 3 columns on desktop 🙁

[newki]

Sorry, I did the “test” on this URL : trustin.io/contact

[Kyle – SUPPORT]

You still have your previous css with floating the inputs, you need to remove that

– Kyle

[newki]

I don’t understand your answer, what do I have to remove?

[Kyle – SUPPORT]

Remove this:

@media only screen and (min-width: 768px) { 
.wpcf7 form.wpcf7-form p.firstname,
.wpcf7 form.wpcf7-form p.name,
.wpcf7 form.wpcf7-form p.phone,
.wpcf7 form.wpcf7-form p.email,
.wpcf7 form.wpcf7-form p.company,
.wpcf7 form.wpcf7-form p.jobtitle, 
.wpcf7 form.wpcf7-form p.country2, 
.wpcf7 form.wpcf7-form p.city, 
.wpcf7 form.wpcf7-form p.sector {
 float:left;
 width:47%;
}
.wpcf7 form.wpcf7-form p.subject,
.wpcf7 form.wpcf7-form p.country,
.wpcf7 form.wpcf7-form p.need,
.wpcf7 form.wpcf7-form p.experience,
.wpcf7 form.wpcf7-form p.exp-type,
.wpcf7 form.wpcf7-form p.sector2,
.wpcf7 form.wpcf7-form p.motivations,
.wpcf7 form.wpcf7-form p.message,
.wpcf7 form.wpcf7-form p.cv {
 float:right;
 width:47%;
}
}

– Kyle

[newki]

It’s already removed, I’ve replace it by :

@media only screen and (min-width: 768px) { 
.contact-left {
	float:left;
	width:47%;
}
.contact-right {
	float:right;
	width:47%;
}
}

[Kyle – SUPPORT]

Ahh, it’s your html, you’ve put:

instead of

same for contact-right

– Kyle

[newki]

Yep, I’ve just seen I’ve forgot the ” before contact-left.
It’s OK for the 2 columns but on desktop, my background is not OK, it’s only applied on 1 cm, and *champs obligatoires” neither, it should be at the bottom (= mandatory fields in french)