Mobile Form - Text

Hi! I have this form and would like to make the text smaller only on mobile. Can you help me? I'd like to make the text 14px for mobile for the "Hi my email is ____ and I want to learn more about" as well as the multiple choice options.

Hi Jack,

Thanks for reaching out to Jotform Support. Here’s a more flexible code to use for this that works on mobile and will change the text to be smaller only on mobile. You just need to inject this CSS code.. Let me show you how :

1. In the Form Builder, select the paint roller icon in the upper-right corner.
2. In the Form Designer panel on the right, go to Styles at the top.
3. Enter your code under Inject Custom CSS. All changes are saved automatically.

@media screen and (max-width: 600px) {

  body,

  .form-label,

  .form-all,

  .form-input,

  input,

  textarea,

  select,

  .inline-email-container,

  .inline-email-container input,

  .form-checkbox-item label,

  ::placeholder,

  input::placeholder,

  textarea::placeholder,

  .form-submit-button {

    font-size: 14px !important;

  }

}

Results :

Give it a try and let us know if you have any other questions.

This worked well! Thank you! Would you know if it's possible to have the "____" space for the email address line to be next to the "My email is" text? and then reduce the padding between that line and "I want to learn more about..."?

What it currently looks like:

Can we make it like this?

Hi Jack,

I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Thanks for your patience.

Hi Jack,

Definitely, here’s a more flexible code to use to place the space or email field next to the "Hello! My Email is" text. Additionally, this will reduce the padding between the text "I want to learn more about." This is with reference to the picture you have posted. You just need to inject this CSS code.. Let me show you how :

1. In the Form Builder, select the paint roller icon in the upper-right corner.
2. In the Form Designer panel on the right, go to Styles at the top.
3. Enter your code under Inject Custom CSS. All changes are saved automatically.

@media screen and (max-width: 600px) {

    #cid_2{

        height: auto !important;

        margin-top: 16px !important;

        

    }

    #id_2 label{

        width: unset !important;

    }

    #id_2 #cid_2 input{

        padding: 0 !important;

        height: unset;

    }

    

    .form-line#id_2{

        margin-bottom: 0;

        padding-bottom: 0 !important;

    }

    .form-line#id_5{

        margin-top: 0;

        padding-top: 0 !important;

    }

}

Results :

Give it a try and reach out again if you have any other questions.

This worked!! Thank you SO much for your help!