Browser Resizing Breaks Form CSS

[Anonymous]

I am using a Forms 2.0 four-column form on a landing page, and it looks like this: http://goo.gl/Uc3QpE

Whenever the browser is resized to be around 500 pixels wide or less, the form's CSS breaks/changes, and the form is rendered like this: http://goo.gl/SZGFBG  (Blue bars on the side of image are the browser window)

Most mobile device browsers have the form display with only 1 column to begin with, and also have the seemingly random increase to the field font size (see the select lists in each image)

Why is this happening, and is there a way to fix it or override the CSS that I am assuming causes this?


 

[Anonymous]

I would try changing the form css to use relative positioning and percentages, instead of pixels?

[Anonymous]

Relative positioning and percentages doesn't do the trick.  The only behavior I can override is the font-size increase to 18px.  The form still changes to single-column when the window size is ~500px or less.

[Anonymous]

Figured out how to solve the issue.  For anyone else who may encounter this:

You will need to include the following block on your page.  If adding to a template, make sure to use !important so that it is not ignored when the forms2.0 css is loaded.

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-device-height: 480px) {

.mktoForm .mktoFormCol {
    float: left;
}
.mktoForm .mktoFormRow .mktoFormCol {
    clear: none;
}

.mktoForm, .mktoForm * {
    padding: 0px;
}

// This margin is to align the labels with the fields
.mktoForm .mktoFormRow .mktoRequiredField .mktoAsterix {
    margin-left: 10px;
}

// This part prevents the text resizing.  The margin is to restore the gutter/offset between columns
.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 {
    font-size: 13px;
    margin-left: 10px;
}

}

You may also have to use 'html {-webkit-text-size-adjust:none}' so that text does not resize on mobile devices as well.