3 Replies Latest reply on Jan 12, 2015 11:50 AM by Ben Griffith

    Browser Resizing Breaks Form CSS

    Ben Griffith
      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?


       
        • Re: Browser Resizing Breaks Form CSS
          I would try changing the form css to use relative positioning and percentages, instead of pixels?
          • Re: Browser Resizing Breaks Form CSS
            Ben Griffith
            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.
            • Re: Browser Resizing Breaks Form CSS
              Ben Griffith
              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.