AnsweredAssumed Answered

Form Responsive CSS Not Correct On Load

Question asked by f9c9b53be4eb7fd2a512c30e2b8bcf3a64f59f9c on Jan 22, 2018
Latest reply on Jan 22, 2018 by f9c9b53be4eb7fd2a512c30e2b8bcf3a64f59f9c

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:


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?