100% width not working when implementing a Mailchimp form into my footer in Wordpress-CodePudding

So I've been trying to implement a Mailchimp form onto my site so people can subscribe to the email newsletter. I am using Wordpress and trying to implement this via a Custom HTML Widget in my footer.

width:100%; wasn't working for me, but it will let me use it with a pixel value. Of course I want to be able to use 100% width and not have to use a pixel value. The only way I was able to use a % value is when I added position:absolute; but then the button only moves to be about 60% of whatever width I use. I am really stuck and just want the email input and the subscribe button to be at 100% width. Anyone have any suggestions for me? I feel like it's a simple fix but I have spent hours on it so far.

Here's what it looks like:

Text

Here's the current code:

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{ width:80%; 
position:absolute; 
clear:left;  
font:14px Helvetica,Arial,sans-serif; }

#mc-embedded-subscribe {
    width:100%; 
position:absolute; 
background-color: #94a6bf !important; }

    /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="KEEPING THIS PRIVATE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email" required>
    <!-- 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;" aria-hidden="true"><input type="text" name="b_bb6e0bb53d927bf2a775cf919_9a92e414ab" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

CodePudding user response：

Parent div also define full width. this works for me. try this.

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    div#mc_embed_signup_scroll {
    width: 100%;
}
   input#mce-EMAIL {
    width: 100%;
    margin: 10px 0px;
}#mc-embedded-subscribe {
    width: 100%;
    background-color: #94a6bf !important;
}

    /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="KEEPING THIS PRIVATE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email" required>
    <!-- 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;" aria-hidden="true"><input type="text" name="b_bb6e0bb53d927bf2a775cf919_9a92e414ab" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

CodePudding user response：

use style attribute on the button (style="width:100%;")

<div id="mc_embed_signup">
<form action="KEEPING THIS PRIVATE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email" required>
    <!-- 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;" aria-hidden="true"><input type="text" name="b_bb6e0bb53d927bf2a775cf919_9a92e414ab" tabindex="-1" value=""></div>
    <div><input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button" style="width:100%;"></div>
    </div>
</form>
</div>