Enlarge Form on Web but Keep Same Dimension on Mobile

Site URL: https://decade3.co.uk

I am having some trouble enlarging the subscribe form that I have embedded into my website. I want the dimensions to remain the same for mobile as it is perfect, but ideally I'd like the width of the form and submit button to be about one third bigger on the web. This is the embed code:  

<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{clear:left; font: 30px Helvetica,Arial,sans-serif; width:100%;}
</style>
<div id="mc_embed_signup">
<form action="https://decade3.us6.list-manage.com/subscribe/post?u=9ac1cc22bc347b116038ab2ce&amp;id=a4ec61b98b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <label for="mce-EMAIL">An all-new site is coming soon. </label>
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email" required>
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ac1cc22bc347b116038ab2ce_a4ec61b98b" tabindex="-1" value=""></div>
    </div>
    <div><input type="submit" value="Request Early Access" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

How would I go about doing this?

On 7/26/2021 at 10:24 AM, clattenburgcake said:

Site URL: https://decade3.co.uk

I am having some trouble enlarging the subscribe form that I have embedded into my website. I want the dimensions to remain the same for mobile as it is perfect, but ideally I'd like the width of the form and submit button to be about one third bigger on the web. This is the embed code:  

<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{clear:left; font: 30px Helvetica,Arial,sans-serif; width:100%;}
</style>
<div id="mc_embed_signup">
<form action="https://decade3.us6.list-manage.com/subscribe/post?u=9ac1cc22bc347b116038ab2ce&amp;id=a4ec61b98b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <label for="mce-EMAIL">An all-new site is coming soon. </label>
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email" required>
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ac1cc22bc347b116038ab2ce_a4ec61b98b" tabindex="-1" value=""></div>
    </div>
    <div><input type="submit" value="Request Early Access" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

How would I go about doing this?

Hi. You mean increase input/button width on desktop?

Hi tuanphan, yes indeed that is what I mean!

On 7/31/2021 at 9:17 AM, clattenburgcake said:

Hi tuanphan, yes indeed that is what I mean!

Add to Design > Custom CSS

/* desktop form width */
@media screen and (min-width:768px) {
#mc_embed_signup input.email {
    width: 70%;
}
input#mc-embedded-subscribe {
    width: 70%;
}
}

Thanks tuanphan, that worked!