Form button shrinks on mobile

[enilson4]

So this falls into the category of fixing one problem causes another.

I added some custom CSS to deal with an alignment problem of labels and checkboxes on mobile that I found in another community article.  However, when I use this code, it makes the submit button have a very narrow height on mobile.  I tried removing the line that references button height and that didn't seem to help.  No matter what I do the button looks the same.  Any idea what I'm missing?

@media screen and (max-width:480px) {
    form.mktoForm .mktoCheckboxList {margin-top:0px !important;}
	form.mktoForm label.mktoLabel {width:calc(100% - 30px) !important;}
  	form.mktoForm, form.mktoForm * {padding:0px !important;}
    div.mktoForm {width:100% !important; max-width:100% !important; margin:0px !important;}
    form.mktoForm {margin:0px !important; width:100% !important; max-width:100% !important;}
    .mktoForm .mktoCheckboxList {width:20px !important;}
    form.mktoForm button.mktoButton {height:auto !important;}
 	.mktoButtonRow {display: block !important;text-align: center !important;}
}

[Disha_Goyal6]

Hi @enilson4, please share the URL of LP where you have added the form.

[Dave_Roberts · Accepted solution]

It's very likely that this rule is removing the padding for your button from 0-480px viewports (on mobile). 

form.mktoForm, form.mktoForm * {padding:0px !important;}

You could try adding a line of CSS to set the padding for your button at the bottom of the media query to help preserve the button padding on mobile:

@media screen and (max-width:480px) {
    form.mktoForm .mktoCheckboxList {margin-top:0px !important;}
    form.mktoForm label.mktoLabel {width:calc(100% - 30px) !important;}
    form.mktoForm, form.mktoForm * {padding:0px !important;}
    div.mktoForm {width:100% !important; max-width:100% !important; margin:0px !important;}
    form.mktoForm {margin:0px !important; width:100% !important; max-width:100% !important;}
    .mktoForm .mktoCheckboxList {width:20px !important;}
    form.mktoForm button.mktoButton {height:auto !important;}
    .mktoButtonRow {display: block !important;text-align: center !important;}

    /* :::::::: add this line to the bottom of the media query ::::::::::::::::: */
    form.mktoForm button.mktoButton {padding: 15px 30px !important;}

}

 Here I've just plugged in 15px 30px as the padding value, but you'd want to set those to match your tablet/desktop button padding instead.

If this doesn't work for ya, would you mind sharing a link to a page with the form on it so that folks in the community can take a peek under the hood and see what's going on with the rendered CSS?

[enilson4]

Thanks so much Dave - that did the trick!