SOLVED

Form 2.0 mobile responsiveness

Go to solution
Moritz_Trollman
Level 3

Form 2.0 mobile responsiveness

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

Accepted Solutions
Anthony_Figgin1
Level 4

Re: Form 2.0 mobile responsiveness

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
SanfordWhiteman
Level 10 - Community Moderator

Re: Form 2.0 mobile responsiveness

Please provide a link to your page.

Anthony_Figgin1
Level 4

Re: Form 2.0 mobile responsiveness

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

Moritz_Trollman
Level 3

Re: Form 2.0 mobile responsiveness

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

Re: Form 2.0 mobile responsiveness

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

Re: Form 2.0 mobile responsiveness

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.