How Do I Solve This Responsive HTML Form

We just made an HTML form that connects with Mailchimp. Even though we added everything, When we embed this code in blog posts the form is too wide on mobile devices. The same form with the same code appears to be perfect in the footer though.

This is our code:

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#BF40BF; clear:left; font:14px Helvetica,Arial,sans-serif;   width: 700px;
  max-width: 180%;
  margin: auto;
  border: 4px solid #000000;
}

    /* 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. */
       .button{background-color: #ffbf00!important; font-weight:bold!important}
       #mc_embed_signup .helper_text {
    color: #C62222!important;
    background: none!important;
   
}

.button:hover{
    background: red!important;
}

#mc_embed_signup div.response {
    color: black!important;
    padding: 1em .5em .5em 0!important;
   
}

#mc_embed_signup div#mce-responses {
    float: left;
    top: -1.4em;
    padding: 0em .5em 0em .5em;
    overflow: hidden;
    width: 90%;
    margin: 0px -1%;
    clear: both;
}

</style>
<div id="mc_embed_signup">
    <form action="https://averagebeing.us5.list-manage.com/subscribe/post?u=544282848f4b824b391eb72e9&amp;id=890529600c&amp;f_id=00d2a3e6f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
        <h1 style="text-align:center!important ; color:#fff!important; padding-top:10px; font:30px Barlow;"; >Fan Of Comics or Anime?</h1>
        <div style ="color:#fff!important"class="indicates-required"><span style="color:#C62222!important" class="asterisk">*</span> indicates required</div>
<div style="color:#fff!important"class="mc-field-group">
    <label for="mce-EMAIL">Email Address  <span style="color:red!important"class="asterisk">*</span>
</label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
    <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div style="color:#fff!important" class="mc-field-group">
    <label for="mce-FNAME">First Name  <span style="color:#C62222"class="asterisk">*</span>
</label>
    <input type="text" value="" name="FNAME" class="required" id="mce-FNAME" required>
    <span id="mce-FNAME-HELPERTEXT" class="helper_text"></span>
</div>
<div style="color:#fff!important" class="mc-field-group input-group">
    <strong>Choose your preference and we'll deliver exactly that! </strong>
    <ul style="color:#fff!important"><li>
    <input type="checkbox" value="1" name="group[383353][1]" id="mce-group[383353]-383353-0">
    <label for="mce-group[383353]-383353-0">Superheroes</label>
</li>
<li>
    <input type="checkbox" value="2" name="group[383353][2]" id="mce-group[383353]-383353-1">
    <label for="mce-group[383353]-383353-1">Anime</label>
</li>
<li>
    <input type="checkbox" value="4" name="group[383353][4]" id="mce-group[383353]-383353-2">
    <label for="mce-group[383353]-383353-2">Real Stories &amp; Case Studies</label>
</li>
<li>
    <input type="checkbox" value="8" name="group[383353][8]" id="mce-group[383353]-383353-3">
    <label for="mce-group[383353]-383353-3">News</label>
</li>
</ul>
    <span id="mce-group[383353]-HELPERTEXT" class="helper_text"></span>
</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;" aria-hidden="true"><input type="text" name="b_544282848f4b824b391eb72e9_890529600c" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Hop-in For Free" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

This is our website: averagebeing.com

Look at the sign-up form just above the footer and then the one we have inside an article here: https://averagebeing.com/how-anime-saved-a-person-an-untold-truth/

I don't know what's going wrong here, Can anyone help?

How Do I Solve This Responsive HTML Form

1 Answers