Hi,

Can you tell me more about your issue? And show me URL for your issue to I can take it a look on this help you. 

Best Regards,

PenciDesign

Hi,

Please try do following steps:

1/ Use this markup for all paragraphs on the contact form with class like that:

<p class="penci-col2">
Content for column 1
</p>
<p class="penci-col2">
Content for column 2
</p>

2/ Add more this code to Customize > Custom CSS:

@media only screen and (max-width: 479px){
.wpcf7-form .penci-col2{ width: 48%; margin-right: 2%; float: left; }
.wpcf7-form .penci-col2:nth-child(2n+2){ margin-right: 0; }
.wpcf7-form .penci-col2:nth-child(2n+1){ clear: both; }
}

Best Regards,

PenciDesign

Hi,

Yes, because the code I given for you is for 2 columns - not 4 columns.

If you want to do that, you can try with the code like this:

<div class="penci-wrapper-col">
<div class="penci-col4">
Content for column 1
</div>
<div class="penci-col4">
Content for column 2
</div>
<div class="penci-col4">
Content for column 3
</div>
<div class="penci-col4">
Content for column 4
</div>
</div>

And add more this code to Customize > Custom CSS:

@media only screen and (min-width: 480px){
.penci-wrapper-col .penci-col4{ width: 23.5%; margin-right: 2%; float: left; }
.penci-wrapper-col .penci-col4:nth-child(4n+4){ margin-right: 0; }
.penci-wrapper-col .penci-col4:nth-child(4n+1){ clear: both; }
}
@media only screen and (max-width: 479px){
.penci-wrapper-col .penci-col4{ width: 48%; margin-right: 2%; float: left; }
.penci-wrapper-col .penci-col4:nth-child(2n+2){ margin-right: 0; }
.penci-wrapper-col .penci-col4:nth-child(2n+1){ clear: both; }
}

Best Regards,

PenciDesign

Hi,

I see you're using Elementor, why you don't use columns from Elementor?

Please check more about this here

Best Regards,

PenciDesign