How to make image full-width

  • Profile Image
    kgavriel
    Asked on January 10, 2017 at 08:46 PM

    Hello,

    I need some help making the header image full-width. So far I was able to remove the shadow-border, make form 100% width (top code) and set image width to 100%, but still cant get rid of the white space. 

    I also need help selecting all the fields so I can set left padding with css. Its easy to select required ones, but not the rest. Only option is to select the form-line, but that moves image as well. 

    Relevant code and screenshots below. 

     

    Thanks! 

     

    .form-all {

        width : 100% !important;

        max-width : none;

        margin-top : 20px;

        padding : 0px;

    }

    ----------------

    .form-image {

        width : 100%;

        height : 100%;

    }

  • Profile Image
    Charlie
    Answered on January 11, 2017 at 02:41 AM

    Hi,

    Could you please check this cloned form I have and if that's what you would like to accomplish: https://form.jotform.com/70101054796956. You can clone it to have a copy of it in your account. Here's how: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    I checked your CSS code and updated it to this:

    .supernova .form-all {

        border : 0px solid rgba(0, 0, 0, 0);

        -webkit-box-shadow : 0 0px 0px rgba(0, 0, 0, 0.1);

        -moz-box-shadow : 0 0px 0px rgba(0, 0, 0, 0.1);

        box-shadow : 0 0px 0px rgba(0, 0, 0, 0.1);

    }

    .form-all {

        width : 100% !important;

        max-width : none;

        margin-top : 0 !important;

        padding : 0px;

    }

    .form-html h2 {

        font-weight : 700;

    }

    .jotform-form {

        padding : 0px;

        margin : 0px;

    }

    .form-image {

        width : 100%;

        height : 100%;

    }

    .form-html {

        padding-left : 50px;

    }

    /*Set all the images to 0 padding and set margin-top to 0*/

    [data-type='control_image'].form-line {

        padding: 0 !important;

        margin-top: 0 !important;

    }

    /*Set all fields that are not images to have a margin left and right auto and width to 80%*/

    li:not([data-type='control_image']) {

        margin-left: auto !important;

        margin-right: auto !important;

        width: 70% !important;

    }

     

    The code blocks that I added are the ones at the last part, I added comments on them to guide you better.

    Let us know if that works. 

  • Profile Image
    kgavriel
    Answered on January 11, 2017 at 08:27 AM

    Thank you so much Charlie, that is exactly what I'm trying to accomplish! I'll do this and let you know how it went :)

  • Profile Image
    kgavriel
    Answered on January 11, 2017 at 09:05 AM

    It worked like a charm! Thanks again. I simply injected your code :)

    https://form.jotform.com/70065517912151