Adapt contact form width to the width of the screen

Hi,

We have received your query and it is now being processed. We will get back to you on this forum as soon as we can.

Regards,
BestWebSoft Support Team

Hi,

Please provide a link to the page where the contact form is located.

Sincerely,
BestWebSoft Support Team

Here is the link where the contact form is located.

https://bit.ly/1OZSzDJ

I’d like its width to adapt to the screen.

Thank you for your help.

Hi,

We’ve followed the link you provided and checked the adaptability of the contact form, all works correctly. Please describe in more detail, what do you mean saying “I’d like its width to adapt to the screen.”? Do you want contact form fields stretched to the entire width of the screen? For which mobile device you want to adapt the width of the contact form?

Sincerely,
BestWebSoft Support Team

Yes, I would like the width of the contact form to stretch to the entire width of the the page, when consulted on a computer. Right now it seems that the contact form is small and fixed so as to fit mobile devices, but I’d like it to be able to expand so as to fit my website page when consulted from a desktop as well.

Thank you for the help!

Hi,

Please add the following code to the end of the css style of your theme:

@media screen and (min-width: 320px) {
#cntctfrm_first_column,
.cntctfrm_one_column {
max-width: inherit;
}
}

Let us know about results.

Sincerely,
BestWebSoft Support Team

No it doesn’t work. Thank you though.

Before the last update, it used to work with the following code, but not anymore:

.cntctfrm_label,
.cntctfrm_input,
.cntctfrm_select,
.cntctfrm_checkbox {
max-width: 100%;
}

I just want the width of the contact form to adapt to the max width of the post.

Thank you for helping

Hi,

In the last Contact Form update we changed the plugin structure and that is why the css code stopped working. To solve this, please replace this code

.cntctfrm_label,
.cntctfrm_input,
.cntctfrm_select,
.cntctfrm_checkbox {
max-width: 100%;
}

with

.cntctfrm_one_column,
.cntctfrm_column,
.cntctfrm_label,
.cntctfrm_input,
.cntctfrm_select,
.cntctfrm_checkbox {
max-width: 100%;
}

Sincerely,
BestWebSoft Support Team

Perfect!

Thank you!

Hi,

You’re welcome! Feel free to contact our support team with any questions in future.

Have a nice day.

Sincerely,
BestWebSoft Support Team