Columns in Contact form

[Thiswonderfullife]

Hi there,
I see that on my mobile device the two columns to enter your name and email address have moved and I don’t know why or how I can change that? On the desktop view it is fine but also on smaller, like laptop or tablet, it is already moved.

Thanks for help!

[prakash_s]

Hello @Thiswonderfullife,

Thanks for writing to us.

It is working fine in the larger device since there is plenty of space to align two input fields with a label in 2 columns but when it comes to the small screen there is not much space to align the input fields label in 2 columns at the same time the email label text is large because of that it is pushing the input field down and it looks misaligned. I would suggest you reduce the font size of the label so that it gets align properly on the mobile device or you need to make the column layout one column for the mobile device.

In case if you want to make it one column layout on the mobile and 2 columns for the larger devices you need to wrap your Contact-form-7 input field and label it like this.

<div class="x-container">
	<div class="x-column x-sm x-1-2" style="">
		[text* your-name]
	</div>
	<div class="x-column x-sm x-1-2 last" style="">
		[email* your-email]
	</div>
</div>

Hope it helps
Thanks

[Thiswonderfullife]

Thank you very much, yes, that helped!

[prakash_s]

Hello @Thiswonderfullife,

Glad that we were able to help you. Please feel free to reach us if you have any query regarding our theme and theme settings.

Thanks