Community forum for knowledge and support

Updated 11 months ago

Optimizing Contact 5 for the Smallest Breakpoint

At a glance

The community member is having an issue with the Contact 5 component not working for the smallest breakpoint (NES 256px) on their website. Another community member provides a solution, suggesting to wrap the recaptcha in a div and use flex, as well as use display flex vertical for the component and align: stretch for the form-block. They also mention that adding the custom attribute data-size=compact can help with the recaptcha's appearance on mobile. The original poster confirms that the problem is solved and expresses gratitude.

Useful resources

Hi again, I have one more question on a different page. I am using Contact 5 and, for whatever reason, it doesn’t want to work for the smallest breakpoint NES 256px. I haven’t had any issues with any of the other components. Is there something that I did wrong, or, do we not optimize for breakpoints that small? https://preview.webflow.com/preview/alpenglow-counseling?utm_medium=preview_link&utm_s[…]379620f823&pageId=65931f94e2cae00748f8512d&workflow=preview

M
S
2 comments

Ah yeah so there are a couple of tips for this breakpoint.

The main issue is the recaptcha. If you wrap the recaptcha in a div and do flex - that should resolve that. (first screenshot)

And then you'll also want to use display flex vertical for the component and then do align: stretch for the form-block. (2nd & 3rd screenshot)

If you really care about what the recaptcha looks like on mobile, you can also add this little custom attribute to make it compact.
data-size=compact (final screenshot)

Hope that helps!

Yes, it does! Problem solved!! Thank you SO much.

Add a reply
Sign up and join the conversation on Slack