4

I just created a mailchimp form for my website and want to change the design. But between the email input and the button is a little white empty space. I played already a lot with the css code but I can't fix it by myself. I think it's not a big change but I don't get it correct.

Can you guys help me to remove the space and let me know, where is the issue in my code?

Thanks, Chris

#mce-EMAIL {
  display: inline-block;
  padding: 8px 0;
  width: 70%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: #343434;
  padding: .7em 9em .7em 2em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  background-color: rgb(240, 240, 240);
  background-image: none;
  background-repeat: repeat;
  background-attachment: scroll;
  background-clip: border-box;
  background-origin: padding-box;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto auto;
  font-family: "Arial" inherit;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px 0 0 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 5px;
  opacity: 0.9;
  border-style: solid;
  border: none;
}


/* Input Styles */

.button {
  clear: both;
  display: inline-block;
  width: 25%;
  letter-spacing: .03em;
  padding: .7em 2em;
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  height: 46px;
  background: #fc2;
  font-family: "Arial" inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
}


/* Button Styles */

#mc-embedded-subscribe {
  display: inline-block;
  width: 20%;
  margin: 0;
  padding: 0;
}

#mc_embed_signup .mc-field-group input {
  /*display: block;*/
  /*width: 100%;*/
  /*padding: 8px 0;*/
  text-indent: 2%;
  width: 200px;
}

#mc_embed_signup input.mce_inline_error {
  border-color: #6B0505;
}

#mc_embed_signup input {
  border: 0px solid #999;
  -webkit-appearance: none;
}

#mc_embed_signup .mc-field-group label {
  display: block;
  margin-bottom: 3px;
}
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
  <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&amp;id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
      <div class="mc-field-group">
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM">
        <input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
      </div>
      <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
      </div>
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
      <div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
      <div class="clear text-center"></div>
    </div>
  </form>
</div>
<!--End mc_embed_signup-->
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
Chris
  • 41
  • 8

3 Answers3

1

I think best solution is display: flex. No more additional css.. It remove white space and make both input height equal.

Basic concepts of flexbox

.mc-field-group {
    display: flex;
}


.mc-field-group {
    display: flex;
}

#mce-EMAIL { 
  display: inline-block;
  padding: 8px 0;
  width: 70%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  font-size: 1em; 
  color: #343434; 
  padding: .7em 9em .7em 2em; 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  margin: 0;
    background-color: rgb(240, 240, 240);
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto auto;
font-family: "Arial" inherit;

color: #737373;
letter-spacing: 1px;
text-indent: 5%;
border-radius: 5px 0 0 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 5px;
opacity: 0.9;
  border-style:solid;
  border: none;
} /* Input Styles */


.button { 
  clear: both;
  display: inline-block;
width: 25%;
  letter-spacing: .03em; 
  padding: .7em 2em; 
  border: none; 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  margin: 0; 
  
  height: 46px;
  background: #fc2;
  font-family: "Arial" inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
} /* Button Styles */



#mc-embedded-subscribe{
    display: inline-block;
    width: 20%;
    margin: 0;
    padding: 0;
}

#mc_embed_signup .mc-field-group input {
 /*display: block;*/
 /*width: 100%;*/
 /*padding: 8px 0;*/
 text-indent: 2%;
  width: 200px;
}
#mc_embed_signup input.mce_inline_error {
 border-color: #6B0505;
}
#mc_embed_signup input {
 border: 0px solid #999;
 -webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
 display: block;
 margin-bottom: 3px;
  

}
<!-- Begin MailChimp Signup Form -->
                <div id="mc_embed_signup">
                <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&amp;id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                    <div id="mc_embed_signup_scroll">
                <div class="mc-field-group">
              
                    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM">
<input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
                </div>
                    <div id="mce-responses" class="clear">
                        <div class="response" id="mce-error-response" style="display:none"></div>
                        <div class="response" id="mce-success-response" style="display:none"></div>
                    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                    <div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
                    <div class="clear text-center"></div>
                    </div>
                </form>
                </div>
                <!--End mc_embed_signup-->
Pedram
  • 15,766
  • 10
  • 44
  • 73
1

this is because the browser refers to line items as words in the text. and between words it is necessary to put an inter-word interval.

just put a comment between the input, so that there is not a single blank or a line break between them.

#mce-EMAIL { 
  display: inline-block;
  padding: 8px 0;
  width: 70%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  font-size: 1em; 
  color: #343434; 
  padding: .7em 9em .7em 2em; 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  margin: 0;
    background-color: rgb(240, 240, 240);
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto auto;
font-family: "Arial" inherit;

color: #737373;
letter-spacing: 1px;
text-indent: 5%;
border-radius: 5px 0 0 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 5px;
opacity: 0.9;
  border-style:solid;
  border: none;
} /* Input Styles */


.button { 
  clear: both;
  display: inline-block;
width: 25%;
  letter-spacing: .03em; 
  padding: .7em 2em; 
  border: none; 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  margin: 0; 
  
  height: 46px;
  background: #fc2;
  font-family: "Arial" inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
} /* Button Styles */



#mc-embedded-subscribe{
    display: inline-block;
    width: 20%;
    margin: 0;
    padding: 0;
}

#mc_embed_signup .mc-field-group input {
 /*display: block;*/
 /*width: 100%;*/
 /*padding: 8px 0;*/
 text-indent: 2%;
  width: 200px;
}
#mc_embed_signup input.mce_inline_error {
 border-color: #6B0505;
}
#mc_embed_signup input {
 border: 0px solid #999;
 -webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
 display: block;
 margin-bottom: 3px;
  

}
<!-- Begin MailChimp Signup Form -->
                <div id="mc_embed_signup">
                <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&amp;id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                    <div id="mc_embed_signup_scroll">
                <div class="mc-field-group">
              
                    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"><!--
--><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
                </div>
                    <div id="mce-responses" class="clear">
                        <div class="response" id="mce-error-response" style="display:none"></div>
                        <div class="response" id="mce-success-response" style="display:none"></div>
                    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                    <div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
                    <div class="clear text-center"></div>
                    </div>
                </form>
                </div>
                <!--End mc_embed_signup-->
Andrei Fedorov
  • 3,689
  • 2
  • 13
  • 25
1

The issue is the white space between your two elements. The input element are inline elements and the white space between them is displayed as a single space. There are several ways to solve it and you can even use a different design like is suggested in the other answer, but you solve it in your current design by simply removing all the white space between the two elements, like this:

#mce-EMAIL {
  display: inline-block;
  padding: 8px 0;
  width: 70%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: #343434;
  padding: .7em 9em .7em 2em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  background-color: rgb(240, 240, 240);
  background-image: none;
  background-repeat: repeat;
  background-attachment: scroll;
  background-clip: border-box;
  background-origin: padding-box;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto auto;
  font-family: "Arial" inherit;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px 0 0 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 5px;
  opacity: 0.9;
  border-style: solid;
  border: none;
}


/* Input Styles */

.button {
  clear: both;
  display: inline-block;
  width: 25%;
  letter-spacing: .03em;
  padding: .7em 2em;
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  height: 46px;
  background: #fc2;
  font-family: "Arial" inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
}


/* Button Styles */

#mc-embedded-subscribe {
  display: inline-block;
  width: 20%;
  margin: 0;
  padding: 0;
}

#mc_embed_signup .mc-field-group input {
  /*display: block;*/
  /*width: 100%;*/
  /*padding: 8px 0;*/
  text-indent: 2%;
  width: 200px;
}

#mc_embed_signup input.mce_inline_error {
  border-color: #6B0505;
}

#mc_embed_signup input {
  border: 0px solid #999;
  -webkit-appearance: none;
}

#mc_embed_signup .mc-field-group label {
  display: block;
  margin-bottom: 3px;
}
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
  <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&amp;id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
      <div class="mc-field-group">

        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
      </div>
      <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
      </div>
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
      <div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
      <div class="clear text-center"></div>
    </div>
  </form>
</div>
<!--End mc_embed_signup-->

Although this is a simple solution, it is not very elegant to have many elements on one long line. To split the line, you can make use of one HTML features which ignores the white space inside the tags, so just split inside the tags like this:

<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"
    ><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

Or like this:

<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"><
    input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

Or you can convert the white space to a comment like this:

<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"><!--
    --><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

Please note that most editors may break those solutions when they reformat your HTML, so either avoid reformatting or reapply the fix afterwards.

Racil Hilan
  • 24,690
  • 13
  • 50
  • 55