Can you help me with CSS on a form?

  • Profile Image
    unruhfurniture
    Asked on January 31, 2018 at 08:14 AM

    Please see the attached for my CSS question. Thanks so much for the help!

    Jotform ID: 
    80303333684149

    Web Page: 
    https://unruhfurniture.com/confirm-email/


    Current CSS for Sheet

    .form-label.form-label-auto {

        display : block;

        float : none;

        text-align : left;

        width : 100%;

    }


    .form-required {

        color : #ffffff;

    }


    .form-line-error .form-error-message {

        background-color : #1D3648;

    }


    .form-line-error .form-error-message .form-error-arrow {

        border-bottom-color : #1D3648;

    }


    .form-line-error {

        background-color : #ffffff;

    }


    body, .form-all {

        background : none !important;

    }


    .form-all {

        margin-left : 100 !important;

    }


    .jotform-form {

        padding : 0!important;

    }


    .form-line-error .form-error-message {

        background-color : none;

    }


    .form-line-error .form-error-message .form-error-arrow {

        border-bottom-color : #ffffff;

    }


    .form-line-error {

        background-color : #ffffff;

    }


    .supernova .form-all {

        border : 0 !important;

        box-shadow : none !important;

        -moz-box-shadow : none !important;

        -webkit-box-shadow : none !important;

    }


    .form-line.form-line-active {

        background-color : #ffffff;

    }


    .form-buttons-wrapper {


    }


    .form-pagebreak {

        border-top : none;

    }


    .form-pagebreak {

        border-top : none;

        background : none;

    }


    #form-pagebreak-back_16 {

        display : none;

    }


    input#input_18_1000,  input#input_18_1000 + label {

        display : none;

    }


    .form-submit-button:hover {

        background : #E5C181 !important;

    }


    .form-submit-button:active {

        -moz-box-shadow : 0 0px #000 inset;

        -webkit-box-shadow : 0 0px #000 inset;

        box-shadow : 0 0px #000 inset;

    }


  • Profile Image
    Sabbir
    Answered on January 31, 2018 at 08:31 AM

    You can try injecting the following CSS on your Form designer.

    .form-textbox

    {

      max-width: 400px;

      margin-left: 10px;

    }

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

    Hope this will help.

    If you have any further query, please let us know.




  • Profile Image
    unruhfurniture
    Answered on January 31, 2018 at 08:43 AM
    Thanks so much! That seemed to fix it on Desktop, but the button is still
    overflowing the right side on Mobile (see attached). Is there anything else
    I can do for mobile?
    Thanks for the help!
    Sam
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...
  • Profile Image
    Sabbir
    Answered on January 31, 2018 at 10:27 AM

    Can you try using this CSS code:

    @media screen and (max-width: 450px) {
      .form-textbox {
        width : 400px; !important
        margin-left: 10px; !important
    }
    }

  • Profile Image
    unruhfurniture
    Answered on January 31, 2018 at 11:43 AM
    I just added that code and it's still off (see attached). Any other ideas?
    Sam
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...
  • Profile Image
    Sabbir
    Answered on January 31, 2018 at 12:24 PM

    Your screenshot did not appear. Please follow this guide to know how you can send attachment to our support forum:

    https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum


  • Profile Image
    unruhfurniture
    Answered on January 31, 2018 at 01:43 PM
    How about this? Did this attachment come through? You can also see the same
    thing and may be able to diagnose it better if you open the page
    https://unruhfurniture.com/confirm-email/ on mobile or on Chrome and then
    Inspect it to see it on mobile.
    Does that help? Thanks!
    Sam
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...
  • Profile Image
    Mike_G
    Answered on January 31, 2018 at 03:28 PM

    I have checked your form and I can see that the issue is visible even when the form is just accessed from its direct link.

    To fix the issue, please replace the following CSS codes in your form:

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

      .form-textbox {

        width : 400px; !important;

        margin-left: 10px; !important

    }

    }

    with these codes:

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    .form-all {

        width: 100%!important;

    }

    .form-textbox {

        margin-left: initial !important;

    }

    .form-all .form-submit-button {

        width: 100% !important;

    }

    }

    The form should look like this on your website viewed on mobile when you apply the changes above:

    1517430305t15_23_50.png


    I hope this helps. If you have other questions, please feel free to let us know.

  • Profile Image
    unruhfurniture
    Answered on January 31, 2018 at 04:43 PM
    Hey that did it! Thanks so much!
    Sam
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...