Adjust spacing on mobile line break

By: Grant Breidenbach | Asked: 12/06/2022
ForumsCategory: How-toAdjust spacing on mobile line break
Grant Breidenbach asked 1 year ago
Hello!   On several of my forms there are two park fields such as first name and last name or email and email confirmation. These fields display side by side on desktop and look great. However, on mobile devices, they stack one on top of the other... great, except for that the vertical margins or padding are massive. These fields take up way more space than they should.   So, how can I adjust the vertical spacing to tighten up these fields that are moved into a stacked format on mobile?   Desktop - looks good! Desktop - looks good!   Mobile - too much space (see red annotation showing where there is excess space)
Rob LeVineRob LeVine replied 1 year ago

Can you post a link to the page?

Grant Breidenbach replied 1 year ago

Certainly: https://bearvault.com/connect/

Rob LeVineRob LeVine replied 1 year ago

In theory the following should take care of it if you put it in your Formidable Styles -> Custom CSS, but I've having a hard time getting it to work. Also, you going to want to make sure putting anything in your Custom CSS doesn't hurt other pages. You might just want to add it to the form all by itself

https://paste2.org/tY9x5v4y

Also, for whatever reason, accessing that page (not others) is really slow.

Grant Breidenbach replied 1 year ago

Thank you Rob,

I had to add 2 more braces to get the CSS to work but it did work from the formidable styles.
@media only screen and (max-width: 600px)
{.frm_fields_container > .frm_form_field {
margin-bottom: 5px !important;
}}

This does tighten the margin on all fields which leaves the two stacked fields still looking a bit spaced out but it is notably improved and I think will suffice. Thank you for taking the time to put this CSS together.

Per the page load, not sure. This page is on a cache exclusion list so that Formidable loads correctly but that shouldn't have too dramatic of an impact.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right