Code to make newsletter signup inline

I have been looking for code for the longest to make my newsletter sign up field horizontal/inline and I haven't been able to successfully do that. I would like to do this for desktop and mobile. Below is how it currently looks with handwritten notes of how I want it. 

Can you share your website URL?

I can see that this might work for desktop, but it won't work for mobile like that, the text would be far too long to fit inline on a mobile screen unless the font was tiny.

6 minutes ago, Ziggy said:

Can you share your website URL?

I can see that this might work for desktop, but it won't work for mobile like that, the text would be far too long to fit inline on a mobile screen unless the font was tiny.

@Ziggy mommyhadalittleone.com

x your help is greatly appreciated 🙂

Edited November 4, 2022 by MommyHadALittleOne

Thanks!

Can you tell me what you've already done to the newsletter form to make the elements not stack? What custom coding have you added?

Typically if you have a newsletter form you can easily have the 3 fields side-by-side, but they look like they are stacking because that element is being restricted in width by the other newsletter elements (title/description/button/disclaimer) that are displaying on either side. 

What is your desired position of all of the elements on desktop? Could you very roughly sketch them out?

Playing around in chrome developer tools, I managed to put the inputs side-by-side, but they then make the description and disclaimer very squashed:

20 minutes ago, Ziggy said:

Playing around in chrome developer tools, I managed to put the inputs side-by-side, but they then make the description and disclaimer very squashed:

Here is what I have been using: 

///Newsletter Block Formatting

.newsletter-block .newsletter-form-field-element {

 font-family: "apres" !important; 

 font-weight: 200;

 font-size: 12.5px;

 letter-spacing: 0.9px;

 text-transform: none;

 border-radius: 0px !important;

 background: transparent !important;

 border-top: 0px !important;

 border-left: 0px !important;

 border-right: 0px !important;

 border-bottom: solid 2px #FFFFFF !important;

}

.newsletter-block .newsletter-form-header-title {

 font-size: 60px;

 line-height: 60px;

 letter-spacing: 2px;

 font-family: 'Futura' !important;

 text-align: center;

 text-transform: none;

}

.newsletter-form-field-element::-webkit-input-placeholder {

 color: #000 !important;

}

.newsletter-form-button { 

 background: #000 !important;

 padding: 11px 30px 14px 30px !important;

 border-radius: 2px !important;

 border-color: #FBD40C !important;

 text-transform: uppercase;

 font-size: 25px !important;

 font-family: OstrichSans-Medium!important; 

 font-weight: 900 !important;

 letter-spacing: 1.5em; 

 color: #fff !important;

}

@media only screen and (max-width: 640px) {

 .Footer .newsletter-form-field-element {

  background: none !important;

  border-top: 0px !important;

  border-left: 0px !important;

  border-right: 0px !important;

  border-radius: 0px !important;

  border-bottom: solid 2px #FFFFFF !important; 
  

 }

}

//----------//

 .newsletter-block .newsletter-form-wrapper {
    padding: 0;
    background: none;
  }
  @media only screen and (min-width:820px) {
    .newsletter-block .newsletter-form {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      -webkit-align-items: center;
    }
    .newsletter-block .newsletter-form-header {
      flex: 2;
      -webkit-flex: 2;
      text-align: left;
    }
    .newsletter-block .newsletter-form-header-title, .newsletter-block .newsletter-form-header-description p {
      text-align: left;
    }
    .newsletter-block .newsletter-form-header-description p {
      margin: 10px 0 0;
    }
    .newsletter-block .newsletter-form-header-title {
      font-size: 25px;
      margin-bottom: 0;
    }
    .newsletter-block .newsletter-form-body {
      flex: 3;
      -webkit-flex: 3;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: flex-end;
      -webkit-justify-content: flex-end;
    }
    .newsletter-block .newsletter-form-fields-wrapper {
      flex: 2;
      -webkit-flex: 2;
    }
    .newsletter-block .newsletter-form-field-wrapper {
      width: 95%;
    }
}

 

------ Also attached is what another drawing of what I would like it to look like. How you have it is good. 

@Ziggy

Firstly, I would suggest that you remove the newsletter description and disclaimer text and put that text into text blocks as that will simplify things. Can you do that and let me know when that's done?

Can you make sure the newsletter for is set to Float, make the newsletter block as wide as possible and temporarily remove everything in the Custom CSS below the //----------//?

I can then hopefully get you any CSS you might still need to get the look right.

This should help keep everything on one line:

.newsletter-block .newsletter-form-field-element {
    max-width: 200px;
}

 

54 minutes ago, Ziggy said:

This should help keep everything on one line:

.newsletter-block .newsletter-form-field-element {
    max-width: 200px;
}

 

Thank you so so so so so so much!!!!!!!!!!!!! I had to do some work things so I couldn't respond but that worked AMAZINGGGG

@Ziggy

8 minutes ago, MommyHadALittleOne said:

Thank you so so so so so so much!!!!!!!!!!!!! I had to do some work things so I couldn't respond but that worked AMAZINGGGG

@Ziggy

Not a problem, really glad that helped! If you get a chance can you mark my post as the solution to your question, and give me a thumbs up? Thanks!