Changing Phone width using CSS works in editor but does nothing in preview

  • Profile Image
    goblehpg
    Asked on December 29, 2017 at 07:28 PM

    Changing Phone width using CSS works in editor but does nothing in preview.

    Using an answer from a support thread I found via search, I added the following CSS:

    #input_4_full {

    width:225px;

    }

    In the editor, my phone field gets wider (yay!)  But, as soon as I enter preview, it seems to ignore this CSS.

    My phone field is using a mask to make sure I capture 10 digits and it's showing up too short on mobile (in portrait).

    The form is:
    https://www.jotform.com/build/73625391897168

    Thanks for any help!

    -Brian

  • Profile Image
    djoler
    Answered on December 29, 2017 at 07:43 PM

    Hi,

    Try to put this into CSS code:

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

    [data-type=control_phone] .form-sub-label-container:first-child{

      width: 100%;

    }

    }

    How to inject ccustom CSS:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope this will help?!

  • Profile Image
    goblehpg
    Answered on December 29, 2017 at 08:17 PM

    This worked great, thank you!  :)

  • Profile Image
    djoler
    Answered on December 29, 2017 at 08:34 PM

    I am glad I've been able to help :)