You might be running into an issue with the load order of the CSS when you fiddle around with it and it can definitely be frustrating. Most times you're able to accomplish things by copying the selector you see in the inspector and adding an "!important" tag to the end of each rule inside that selector. The reason this works is because the Custom CSS and Marketo forms2.css get loaded after (further down the document) your theme stylesheets in the <head> -- they get tacked onto the end of the <head> and inside the <form> element once the forms2.js runs on the page to unfold the form which means they come after your other CSS and typically override it.
I borrowed a little bit of a multi-column boilerplate CSS, courtesy of @Courtney_Grimes which can be found here: https://gist.github.com/cougrimes/5168524fd9365eedea16 and added a few bits in there to dial it for your form and your breakpoints (600px).
Here's a look at what Im seeing in the tablet view when I resize the browser window:
New CSS applied in the browser console
and here's a look at the CSS I'm using:
.mktoForm .mktoGutter {height:5px;} /* adjust space between field and label */
.mktoForm .mktoOffset {height:5px;} /* adjust space between field rows */
.mktoForm, .mktoForm .mktoFieldWrap, .mktoForm .mktoHtmlText, label.mktoLabel, .mktoForm input, .mktoForm select, .mktoForm textarea .mktoLogicalField .mktoCheckboxList {width:100% !important;}
@media only screen and (min-width:600px) {
.mktoFormCol:first-child:nth-last-child(2), .mktoFormCol:first-child:nth-last-child(2) ~ .mktoFormCol {width: 100% !important;}
.mktoFormCol:first-child:nth-last-child(3), .mktoFormCol:first-child:nth-last-child(3) ~ .mktoFormCol {width: 50% !important;}
.mktoFormCol:first-child:nth-last-child(4), .mktoFormCol:first-child:nth-last-child(4) ~ .mktoFormCol {width: 33.3333% !important;}
.mktoFormCol:first-child:nth-last-child(3) ~ .mktoFormCol {padding-left: 30px !important;}
}
@media only screen and (max-width:600px) {.mktoFormCol {width:100% !important;}}
You should be able to put this code into the Custom CSS on your form or even include it on the template or an external stylesheet (which would be the preferred method) to get it into play.
Let me know if this works out for you - the fields should just stack up on mobile the way you'd expect and then do the 2-column thing at 600px+.
Thanks, Dave
... View more