Email forms button size desktop only

Support
#1

Hello

I would like to change the width of my Submit/Join button for my mailing list signup form on the left side of this page

How can I do this using CSS in such a way that it ONLY changes the width of the button when viewed on a desktop OS? The way it displays on mobile is perfect but on desktop it is too wide

Thanks!

#2

Hello There,

Thanks for writing in! To resolve your issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(min-width: 980px){
    .tco-subscribe-form input[type="submit"] {
        width: 48%;
    }
}

Hope this helps. Please let us know how it goes.

#3

Hello

Thank you for this

This worked perfectly except the button is no longer centered. How can I modify this code to make the submit button centered in relationship to the email input field?

#4

Is there anything I can do to make the text inside of the submit button responsive? Right now the button has a bunch of blank space on either side when viewed on a desktop, but when viewed on mobile it fits perfectly

If I shrink the button width down it looks good on desktop when viewed full screen- but when the window is shrunk to a smaller size the text inside of the button gets cropped. Is there any way to configure it so that the button is always full (I filled it up with flower symbols on either side of the JOIN text) so that whether you view it on desktop or mobile the button does not have empty space on the sides and the text it contains is not cropped? I do not care about the specific number of flowers filling up the button as long as there is no blank space on the sides/the text is not cropped

Thanks!

#5

Hi There,

To center it and make sure not cutoff and too much space, please update the CSS to this:

@media(min-width: 980px){
    .tco-subscribe-form input[type="submit"] {
       max-width: 315px !important;
    }
.tco-subscribe-form fieldset:last-of-type {
    text-align: center;
}
}

Using 48% even on desktop it might still differ in size because it will be always 48% of the current size. With using maximum width, we’re setting the maximum width of the button no matter how large the screen size is.
Hope this helps.

#6

Thank you for this. When viewed on mobile this still results in cropping the text in an offcenter way unless I increase 315 to 338 at which point there is still extra blank space on either side, any smaller than 338 and the amount of blank space on the left space is smaller than that on the right when viewed on mobile. Is there any work around for this?

Thanks!

#7

Hey There,

You can update the code and use this:

@media(min-width: 980px){
    .tco-subscribe-form input[type="submit"] {
       max-width: 315px !important;
       font-size: 90%;
    }
    
    .tco-subscribe-form fieldset:last-of-type {
       text-align: center;
    }
}

Hope this helps. Kindly let us know.