Skip to content

Instantly share code, notes, and snippets.

@cougrimes
Created July 16, 2015 21:34
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cougrimes/17e1cafd85adc8dfdbb4 to your computer and use it in GitHub Desktop.
Save cougrimes/17e1cafd85adc8dfdbb4 to your computer and use it in GitHub Desktop.
Marketo Forms 2.0 mobile class reset
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-device-height:480px){
.mktoForm,.mktoForm *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box;padding:auto}
/* Yes, I know padding:auto isn't a real property - had to break things somehow :( */
.mktoLabel.mktoHasWidth {height: inherit !important;}
.mktoForm .mktoGutter,.mktoForm .mktoOffset{display:initial !important}
.mktoForm .mktoFormCol .mktoLabel{text-align:left;width:initial !important}
.mktoForm .mktoFormCol{float:initial !important}
.mktoForm .mktoFieldWrap{float:initial !important}
.mktoForm fieldset{padding:initial !important}
.mktoForm input[type=url],.mktoForm input[type=text],.mktoForm input[type=date],.mktoForm input[type=tel],.mktoForm input[type=email],.mktoForm input[type=number],.mktoForm textarea.mktoField,.mktoForm select.mktoField{width:100% !important;height:initial !important;line-height:initial !important;font-size:initial !important}
.mktoForm select.mktoField{height:auto}
.mktoForm .mktoFormRow .mktoField{clear:left}
.mktoForm .mktoFormRow .mktoFormCol{clear:both}
.mktoForm .mktoRadioList,.mktoForm .mktoCheckboxList{width:initial !important}
.mktoForm .mktoFormRow .mktoRequiredField .mktoAsterix{float:left;padding-left:initial !important;padding-right:5px}
.mktoModal .mktoModalContent{padding:initial !important}
.mktoModal .mktoModalClose{right:initial !important}
.mktoButtonRow {width:100%; margin-top:0.35rem !important;}
.mktoButtonWrap {margin-left:0px; float:right;}
.mktoForm .mktoButton {margin-left: 0 !important;}
.mktoButton {padding:0.5rem !important;}
}
@cougrimes
Copy link
Author

Note that this reset is meant for realigning Forms 2.0's mobile specific-properties back in line with the way tablets/desktop display forms. There are a couple of small stylistic choices on lines 18-21 that handle button placement (having the button float right with a small amount of padding and margin) as I was never a fan of the default placement of buttons on mobile. These should be easy for a designer to alter accordingly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment