Form 2.0 mobile responsiveness | Community
Skip to main content
MoritzTr
Level 3
Jul 24, 2017 1:27 PM UTC
Solved

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Anthony_Figgin1
Anthony_Figgin1Accepted solution
Level 2
Jul 26, 2017 2:23 PM UTC

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 reply

5 replies

MoritzTrAuthor
Level 3
Jul 26, 2017 1:51 PM UTC

Hi Sanford, Anthony,

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

BR,

Moritz

Translate
Anthony_Figgin1
Anthony_Figgin1Accepted solution
Level 2
Jul 26, 2017 2:23 PM UTC

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.

Translate
    MoritzTrAuthor
    Level 3
    Jul 27, 2017 6:15 AM UTC

    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.

    Translate
    Anthony_Figgin1
    Anthony_Figgin1
    Level 2
    Jul 24, 2017 8:40 PM UTC

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

    Translate
    SanfordWhiteman
    SanfordWhiteman
    Level 10
    Jul 24, 2017 7:23 PM UTC

    Please provide a link to your page.

    Translate
    Terms & ConditionsAccessibility statement

    Loading footer...