SOLVED

Re: Mobile Form Styling Issues

Go to solution
TammyAmaral1
Level 1

Mobile Form Styling Issues

Hi there,

 

I seem to be having issues with a couple of elements in the mobile styling of my form. For some reason, the 'consent' checkbox moves above the text on mobile and I can't seem to centre the button on mobile. Here is a screenshot of what I'm viewing. Any tips would be appreciated

2 ACCEPTED SOLUTIONS

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Mobile Form Styling Issues

  1. When you use a Rich Text instead of an actual label (as you’re doing with the iConsent field) that creates a 2-column layout which is purposely wrapped to 1-col on mobile. You should use the actual label feature, not a separate RT field that kind of looks like a label.
  2. For the button, you need to re-blockify the row on mobile and center the wrapper:
    @media only screen and (max-width: 480px) {
      .mktoForm .mktoButtonRow {
        display: block;
        text-align: center;
      }
    }

View solution in original post

Dave_Roberts
Level 10

Re: Mobile Form Styling Issues

Try using the "checkboxes" field type instead of the "checkbox" field type. The difference between the two is that the "checkboxes" field type has a "Display Value" (text to the right of the input) AND a label (text above/left of the input, depending on the form settings for Label Position). 

 

If you change the field from checkbox to checkboxes, you can move the "Label" text into the "Values" section under "Display Value" and it'll show up to the right of the checkbox rather than above/left of the input. 
Additional Info: https://nation.marketo.com/t5/product-blogs/form-styling-how-to-position-checkbox-labels-to-the-righ...

 

Otherwise you can use CSS to move the label for the checkbox field to the right of the input but it's not a very durable solution compared to using the native "checkboxes" field type. 

 

Alternately, you could also wrap the RT and checkbox input in a field wrap and use some CSS to target the fields inside of a fieldwrap to display the way you'd like them to on desktop/mobile, but this would probably be my last resort compared to the other two approaches.

View solution in original post

6 REPLIES 6
TammyAmaral1
Level 1

Re: Mobile Form Styling Issues

Screen Shot 2023-06-21 at 11.38.13 AM.png

SanfordWhiteman
Level 10 - Community Moderator

Re: Mobile Form Styling Issues

We need a link to a page with your form. Can't troubleshoot a screenshot.
TammyAmaral1
Level 1

Re: Mobile Form Styling Issues

SanfordWhiteman
Level 10 - Community Moderator

Re: Mobile Form Styling Issues

  1. When you use a Rich Text instead of an actual label (as you’re doing with the iConsent field) that creates a 2-column layout which is purposely wrapped to 1-col on mobile. You should use the actual label feature, not a separate RT field that kind of looks like a label.
  2. For the button, you need to re-blockify the row on mobile and center the wrapper:
    @media only screen and (max-width: 480px) {
      .mktoForm .mktoButtonRow {
        display: block;
        text-align: center;
      }
    }
TammyAmaral1
Level 1

Re: Mobile Form Styling Issues

Hey @SanfordWhiteman thanks for looking in to this. I think the reason why the Demand Gen manager built the form using RT rather than a label is because using a label made the checkbox appear above the text on desktop and mobile, so we're kind of between a rock and a hard place.

Dave_Roberts
Level 10

Re: Mobile Form Styling Issues

Try using the "checkboxes" field type instead of the "checkbox" field type. The difference between the two is that the "checkboxes" field type has a "Display Value" (text to the right of the input) AND a label (text above/left of the input, depending on the form settings for Label Position). 

 

If you change the field from checkbox to checkboxes, you can move the "Label" text into the "Values" section under "Display Value" and it'll show up to the right of the checkbox rather than above/left of the input. 
Additional Info: https://nation.marketo.com/t5/product-blogs/form-styling-how-to-position-checkbox-labels-to-the-righ...

 

Otherwise you can use CSS to move the label for the checkbox field to the right of the input but it's not a very durable solution compared to using the native "checkboxes" field type. 

 

Alternately, you could also wrap the RT and checkbox input in a field wrap and use some CSS to target the fields inside of a fieldwrap to display the way you'd like them to on desktop/mobile, but this would probably be my last resort compared to the other two approaches.