Form 2.0 mobile responsiveness | Community
Skip to main content
M
MoritzTr
Level 3
July 24, 2017
Solved

Form 2.0 mobile responsiveness

  • July 24, 2017
  • 3 replies
  • 4151 views

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.
Best answer by Anthony_Figgin1

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.

3 replies

SanfordWhiteman
SanfordWhiteman
Level 10
July 24, 2017

Please provide a link to your page.

Anthony_Figgin1
Anthony_Figgin1
Level 2
July 24, 2017

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

M
MoritzTrAuthor
Level 3
July 26, 2017

Hi Sanford, Anthony,

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

BR,

Moritz

Anthony_Figgin1
Anthony_Figgin1Accepted solution
Level 2
July 26, 2017

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.

    M
    MoritzTrAuthor
    Level 3
    July 27, 2017

    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.

    Terms & ConditionsAccessibility statement

    Loading footer...