4 Replies Latest reply on Jan 22, 2018 1:41 PM by Dan Wash

    Form Responsive CSS Not Correct On Load

    Dan Wash

      We have Marketo integrated within our product so that our users can embed their forms in content they create. This is working great when viewed on desktop however it has issues when viewed on mobile devices. My guess is that it's a combination of the structure of the page we're embedding the form in and the Marketo code that computes the sizing of the form for widths less than 450px.

       

      You can see the problem here: http://preview.ceros.com/ceros-qa/marketo-1/page/page-5a660a636b1c8

       

      If you load that at a width greater than about 480px, it looks like this:

      If you resize the browser to a width less than 480px WITHOUT refreshing the page, it goes responsive and looks like this, which is expected based upon default media queries set:

       

      However, if you then refresh the page with the width less than 480px, the form doesn't look correct:

      Inspecting the CSS shows that the input fields have a width of 150px set on them for some reason.

       

      We can't really determine a good solution to this problem. The forms work in a standalone page, so we know that it's some combination of our setup combined with the form loading. What we'd really like is a way to completely turn off the mobile responsiveness of the forms and just always load them with the desktop version. I know that can be done with a whole mess of media queries but since it's our customers who will be embedding the forms, we can't expect them all to build their forms with that custom css included.

       

      Anybody have any ideas as to what the problem might be and a possible solution?

       

      Thanks!