I'm writing some css for mobile to get rid of the extra space below two fields on my form - one is a dropdown field and the other is a message (text area) field. I've tried using negative margins, height, padding, etc within multiple classes with no luck - using chrome's inspect I've narrowed the problem down to the .fieldset.form-columns-1 class (all other classes highlight the black boxes but don't include the white space below) - but nothing I've written has changed how it displays.
The extra space only shows up on mobile - here is the entriety of my mobile styling:
It's embedded in an iframe on our site and this is the link to the iframe contents - so things look a little weird, but it'll do for the purpose of finding the right class/properties to edit. Thanks for the help!
@felixmacaspac Thanks so much for helping me with this project. The negative margin was an attempt to move the two fields up to negate the extra white space, but it (obviously) didn't work. The result you found is how I started, with a different issue that I fixed - which resulted in the extra space. The way you have it coded results in the boxes being responsive and stretching when I made the iframe on our site bigger, meaning i could never get the iframe tall enough to include the submit button.
But! I figured it out yesterday. Heres the code I ended up with:
Hey @JLittle2 I believe the problem here is you added a margin-bottom of -30px. I suggest removing the margin completely and just leave the width on the class .hbspt-form fieldset
@felixmacaspac Thanks so much for helping me with this project. The negative margin was an attempt to move the two fields up to negate the extra white space, but it (obviously) didn't work. The result you found is how I started, with a different issue that I fixed - which resulted in the extra space. The way you have it coded results in the boxes being responsive and stretching when I made the iframe on our site bigger, meaning i could never get the iframe tall enough to include the submit button.
But! I figured it out yesterday. Heres the code I ended up with:
Hi @felixmacaspac ! You're right, removing the height in the fieldset class does remove the extra space below the bottom two fields - however, it smashes every other field into an unusable mess. I can't figure out how to edit the styles separately or why those two fields end up much bigger than 150px when the rest aren't.