Form in Mobile View - CSS for padding and font issues

[hpavlac]

I have three issues I can’t figure out how to solve when the landing page and form is in mobile view. I’m hoping these can be resolved by editing some custom CSS in the Form Theme as I am using the drag and drop Landing Page editor and am not sure how to get to the code there. (What little I've done to the form is probably not totally correct as this is the first time I'm attempting some customization.)

https://info.usg.com/newyork-acoustics.html

On mobile:

1. The left and right padding of the form is larger than the padding of the body the form, so the form looks indented.
2. The “Select…” in the dropdown font gets much larger than all the other fonts
3. I don’t have an image of this, but it has been reported by others that only the font between the form and the submit button is showing much larger on iPhones. This does not happen with the message at the top of the form.

Appreciate any assistance!

[Disha_Goyal6]

Hi @hpavlac,

I have checked your page and found all the issues. Please add the below CSS to fix the same

.mktoForm input[type="text"], .mktoForm input[type="url"], .mktoForm input[type="email"], .mktoForm input[type="tel"], .mktoForm input[type="number"], .mktoForm input[type="date"], .mktoForm textarea.mktoField, .mktoForm select.mktoField{
font-size:14px !important;
}
.mktoForm {
  padding: 0px !important;
}
.mktoForm strong, .mktoForm span{
padding:0 !important;
}
.mktoHtmlText span {
    display: block;
}

Thanks,

Disha

[hpavlac]

Thank you @Disha_Goyal6 ! That has fixed items 1 (padding) and 2 (font size of "Select").

But #3 (font size of one section of text is much larger on iphone) is still an issue. A coworker has shared a screenshot with me.

[Disha_Goyal6 · Accepted solution]

Hi @hpavlac,

Please add the below CSS

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}

Thanks,

Disha

[hpavlac]

@Disha_Goyal6  this worked, thank you!