Problem with suscribe formular in smartphones

Hi, I just activated a Coming Soon landing page, that looks good in my computer but I have problems in smartphones.

I added this code from my mail chimp:

<!– Begin MailChimp Signup Form –>

<style type=”text/css”>
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:500px;}<br />
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.<br />
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */<br />
</style>
<div id=”mc_embed_signup”><form id=”mc-embedded-subscribe-form” class=”validate” action=”https://pacande.us17.list-manage.com/subscribe/post?u=3c5902f4478dc00056c351784&id=9030edddde&#8221; method=”post” name=”mc-embedded-subscribe-form” novalidate=”” target=”_blank”>
<div id=”mc_embed_signup_scroll”>
<div class=”mc-field-group”><label for=”mce-EMAIL”>E-Mail </label><input id=”mce-EMAIL” class=”required email” name=”EMAIL” type=”email” value=”” /></div>
<div class=”mc-field-group”><label for=”mce-NAME”>Name </label><input id=”mce-NAME” class=”required” name=”NAME” type=”text” value=”” /></div>
<div id=”mce-responses” class=”clear”></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 tabindex=”-1″ name=”b_3c5902f4478dc00056c351784_9030edddde” type=”text” value=”” /></div>
<div class=”clear”><input id=”mc-embedded-subscribe” class=”button” name=”subscribe” type=”submit” value=”Subscribe” /></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]=’NAME’;ftypes[1]=’text’; /*
* Translated default messages for the $ validation plugin.
* Locale: DE
*/
$.extend($.validator.messages, {
required: “Dieses Feld ist ein Pflichtfeld.”,
maxlength: $.validator.format(“Geben Sie bitte maximal {0} Zeichen ein.”),
minlength: $.validator.format(“Geben Sie bitte mindestens {0} Zeichen ein.”),
rangelength: $.validator.format(“Geben Sie bitte mindestens {0} und maximal {1} Zeichen ein.”),
email: “Geben Sie bitte eine gültige E-Mail Adresse ein.”,
url: “Geben Sie bitte eine gültige URL ein.”,
date: “Bitte geben Sie ein gültiges Datum ein.”,
number: “Geben Sie bitte eine Nummer ein.”,
digits: “Geben Sie bitte nur Ziffern ein.”,
equalTo: “Bitte denselben Wert wiederholen.”,
range: $.validator.format(“Geben Sie bitten einen Wert zwischen {0} und {1}.”),
max: $.validator.format(“Geben Sie bitte einen Wert kleiner oder gleich {0} ein.”),
min: $.validator.format(“Geben Sie bitte einen Wert größer oder gleich {0} ein.”),
creditcard: “Geben Sie bitte ein gültige Kreditkarten-Nummer ein.”
});}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!–End mc_embed_signup–>

And then I added this changes in the CSS

.seed-csp4 body, .seed-csp4 h1,
.seed-csp4 h2, .seed-csp4 h3,
.seed-csp4 h4, .seed-csp4 h5,
.seed-csp4 h6, #mc_embed_signup {
color: #ffff !important;
font-family: ‘arial’ !important;
}

#seed-csp4-headline {
font-weight: bold !important;
margin-top: 90px !important;
}

#mc_embed_signup {
background: none !important;
margin-left: auto;
margin-right: auto;
margin-top: 40px !important;
}

#mc_embed_signup input {
border: 2px solid #ffff !important;
border-radius: 0 !important;
}

#mc_embed_signup .button {
background-color: #02c8a7 !important;
border: none !important;
border-radius: 0 !important;
height: auto !important;
padding: 3px 22px !important;
text-transform: uppercase;
width: 96% !important;
}

#mc_embed_signup .mc-field-group label {
text-transform: uppercase;
}

I really don’t know why this happens, I would really apreciate your help.