Weird Width Issue

Support
#1

Hi guys,

For some reason the form on the contact page is being displayed at 1/3 of its normal width https://prnt.sc/psjoh7 Any idea what is causing this?

Thank you!

#2

Hi @kcreative,

I found it is a conflict with convertplug. See this: https://screencast-o-matic.com/watch/cqX1nXUfp2
Please try to edit the page, then add the following on Content page CSS:

form.wpcf7-form.cp-g-recaptcha-response {
    width: auto;
}

Hope this helps.

#3

Thank you for the reply! The provided code

form.wpcf7-form.cp-g-recaptcha-response {
    width: auto;
}

definitely helps with the issue, but the form is still “minimized”, looks “squashed” https://prnt.sc/pt15gf and is also “pushed” to the left…

What did you mean by “Please try to edit the page”?

Thank you!

#4

Hey @kcreative,

You are most welcome. It’s good to know that @Lely were able to help you out.
Lely mean that you edit your page back in Cornerstone and insert the custom css in the Cornerstone’s custom css area. This is more efficient because the given css code will only load in the page with the issue. If you add the custom css in the Theme Option’s custom css section, the css code will be loaded site wide even in the pages that does not use or apply the code.

Best Regards.

#5

Thank you for the explanation.

However, the issue is definitely not resolved! The form looks a bit better, but not quite “normal yet”. You can see in the video grab that the form “squishes” and becomes smaller once the page loads.

This screen grab also shows how the form is being pushed to the left instead of being centered: https://prnt.sc/ptvh2k

Thank you!

#6

Hello @kcreative,

Please have the css code updated and use this instead:

form.wpcf7-form.cp-g-recaptcha-response {
    width: 100%;
    max-width: 100%;
}

Hope this helps. Kindly let us know.

#7

Thank you for the quick reply, but that didn’t resolve it…

#8

We are delighted to assist you with this.

Cheers!

#9

I believe you didn’t quite read my previous reply…

#10

Hello @kcreative,

Sorry for the confusion. I investigated further and I found out the the ConvertPlus has a built in styling that scales the form 33% less than the actual size. To get this issue resolved, please update the custom css and use this:

form.wpcf7-form.cp-g-recaptcha-response {
    width: 100%;
    max-width: 100%;
    -webkit-transform: none;
    transform: none;
}

We would love to know if this has worked for you. Thank you.

#11

Thank you for your help, always appreciate it! That fixed the issue!

#12

You’re welcome. We’re glad that your issue’s now resolved.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.