Reduce gap and responsive Newsletter

Hi,

so i'm trying to reduce the gap between the newsletter field with CSS code, but cannot find anything. I also want the design to look the same on mobile so the footer isn't too long.

Is it possible?

Thank you 

@AnySavaria2021 Hi! Can you share your site URL for context? 

@Lesum Here's the link : https://www.synapsemanagement.ca/

@AnySavaria2021 Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to reduce the gap between the newsletter fields.

.sqs-block-newsletter .newsletter-form-field-element {
  width: unset !important;
  max-width: 11rem !important;
}

.newsletter-form-field-wrapper.field.first-name, .newsletter-form-field-wrapper.field.last-name, .newsletter-block .newsletter-form-field-wrapper.email {
    min-width: 11rem !important;
}

Please note I didn't add the code for the mobile view because having all the newsletter form fields in a single line, like on the desktop, would make the fields too small, which isn't ideal for user experience.

@Lesum perfect it worked! Thank you! Do you have a code to modify the fields user can view on mobile? If i can keep the email only the footer wouldn't be too long. 

Thanks!

@AnySavaria2021 You can try this CSS code

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1724696124682_47765 .first-name, div#block-yui_3_17_2_1_1724696124682_47765 .last-name {
    display: none;
}
}