SOLVED

Form 2.0 mobile responsiveness

Go to solution
Moritz_Trollman
Level 3

Hi,

I have placed a marketo from 2.0 on a mobile responsive landing page.

It generally renders well but on mobile our contact box shrinks down to 1 row instead of 5 as it is setup in the form settings.

Any idea how I can change this ?

BR,

Moritz

1 ACCEPTED SOLUTION
Anthony_Figgin1
Level 4

There is a CSS that is changing the height of that section from 7em to 1.7em when the screen drops below 480px.

What you need to do is in the header of that page, or in the custom CSS of the form. add this CSS. If you add the code to the form, simply remove <style></style>

<style>

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

.mktoForm textarea[rows="5"] {

    height: 7em !important;

}

}

</style>

This should do it for you.

View solution in original post

5 REPLIES 5
Moritz_Trollman
Level 3

Hi Sanford, Anthony,

Here is a link to a draft page containing the form http://go.cochlear.com/testingmobileform.html

BR,

Moritz

Anthony_Figgin1
Level 4

There is a CSS that is changing the height of that section from 7em to 1.7em when the screen drops below 480px.

What you need to do is in the header of that page, or in the custom CSS of the form. add this CSS. If you add the code to the form, simply remove <style></style>

<style>

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

.mktoForm textarea[rows="5"] {

    height: 7em !important;

}

}

</style>

This should do it for you.

Moritz_Trollman
Level 3

Awesome. That did the trick. Thanks so much for that.

Do you also have a code that would center the form in all resolutions ?

I think its not always centered on all devices.

Anthony_Figgin1
Level 4

We would need to see the code in order to help with this Issue. CSS would need to be used.

SanfordWhiteman
Level 10 - Community Moderator

Please provide a link to your page.