CSS Mobile - Random Space Below form-columns-1

[JLittle2]

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: 

/* mobile styles */
@media(max-width: 300px) {
.hbspt-form fieldset{width:100%; height:150px; margin-bottom: -30px !important;};
.hbspt-form fieldset.form-columns-1{height: 10px !important;};
}

edit: here's a link to our form. https://www-pollen-electric-com.filesusr.com/html/104220_e7f758ead42a3aac186100f9cf1705f2.html

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]

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

@media (max-width: 300px)
.hbspt-form fieldset {
    width: 100%;
    height: auto;
}

then add the following to make the alignment of the inputs more consistent.

fieldset.form-columns-2 .input, fieldset.form-columns-1 .input {
 margin-right: 0 !important;
}

Here's the result on my side implementing that. 

[JLittle2 · Accepted solution]

@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: 

/* mobile styles */

@media (max-width: 500px) {

.hbspt-form form .input{margin-top: 0px; margin-bottom:0px; width:100%; height:75px;}

.hbspt-form fieldset{margin-bottom:-2px;}

.hbspt-form form {margin:0px 0px 0px 2px;}

.hbspt-form form .input textarea{width:100% !important; margin-bottom:5px;}

.hbspt-form form .actions input{margin-left:0px; width:100% !important}

.hbspt-form .is-placeholder{height:50px;}

}

[felixmacaspac]

Hi @JLittle2  I've tried debugging it and removing the height that was set actually fixes the problem, have you tried that out? 

[JLittle2]

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.