Form button shrinks on mobile | Community
Skip to main content
E
enilson4
Level 2
August 23, 2024
Solved

Form button shrinks on mobile

  • August 23, 2024
  • 2 replies
  • 1433 views

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;} }

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Dave_Roberts

 

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?

2 replies

Disha_Goyal6
Community Advisor
Disha_Goyal6Community Advisor
Community Advisor
August 26, 2024

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

 

Dave_Roberts
Dave_RobertsAccepted solution
Level 10
August 27, 2024

 

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?

E
enilson4Author
Level 2
August 27, 2024

Thanks so much Dave - that did the trick!

    Terms & ConditionsAccessibility statement

    Loading footer...