title: Mailchimp Super Slim Subscribe Form - Horizontal Layout
body: <p>I'd like to get this form on a 960px wide responsive magento site that has a smallest size of 320px.</p>
  
  <p>I'd very much like it act/style similar to the newsletter form on <a href="http://vintagestyler.co.uk" rel="nofollow">VintageStyler</a> - If you load the page and scroll to the bottom, you will see a newsletter signup form for email submission. I would like to have my form show in one line, and be responsive, like this one.</p>
  
  <p>Check out my current form > <a href="http://a142501.sb1.dev.codeanywhere.net/mailchimp/" rel="nofollow">The Signup Form</a> - currently "3 rows" that I would like to see in one long horizontal format - until it appears on smaller screens</p>
  
  <p>This is the "super slim" form provided by mailchimp, with all styling included, instead of pulling from their remote CSS</p>
  
  <p>Below is the code I am using</p>
  
  <pre><code>&lt;head&gt;
  &lt;!-- Begin MailChimp Signup Form --&gt;
  &lt;style type="text/css"&gt;
      #mc_embed_signup{/*background:#fff;*/ clear:left; font:14px Helvetica,Arial,sans-serif;  width:960px;}
  #mc_embed_signup form {display:block; position:relative; text-align:left; /*padding:10px 0 10px 3%*/}
  #mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
  #mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
  #mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
  #mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
  #mc_embed_signup input:focus {border-color:#333;}
  /* Button Code */#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
  #mc_embed_signup .button:hover {background-color:#777;}
  #mc_embed_signup .small-meta {font-size: 11px;}
  #mc_embed_signup .nowrap {white-space:nowrap;}     
  #mc_embed_signup .clear {clear:none; display:inline;}
  
  #mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
  #mc_embed_signup input.email {display:block; padding:8px 0; margin:0 4% 10px 0; text-indent:5px; width:35%; min-width:130px;}
  #mc_embed_signup input.button {display:block; width:35%; margin:0 0 10px 0; min-width:90px;}
  
  #mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
  #mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
  #mc_embed_signup #mce-error-response {display:none;}
  #mc_embed_signup #mce-success-response {color:#529214; display:none;}
  #mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="mc_embed_signup"&gt;
  &lt;form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate&gt;
      &lt;label for="mce-EMAIL"&gt;Stay Connected with Tuga Sunwear&lt;/label&gt;
      &lt;input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required&gt;
      &lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt;
      &lt;div style="position: absolute; left: -5000px;"&gt;&lt;input type="text" name="#" tabindex="-1" value=""&gt;&lt;/div&gt;
      &lt;div class="clear"&gt;&lt;input type="submit" value="Subscribe Now" name="subscribe" id="mc-embedded-subscribe" class="button"&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;!--End mc_embed_signup--&gt;
  </code></pre>
  
  <p>If you want to toy around with this and post back here, that would be awesome. I can't seem to figure out why inline-block and getting rid of floats won't solve this.</p>
  
  <p>Thanks again!</p>