Aligning graphics and pics in form

  • Profile Image
    minemetitiri
    Asked on January 21, 2016 at 03:52 PM

    Hi,

     

    I want to center my logos on my form. Nothing I have tried works.

     

    I made my form wider but now I can't center my logos. 

    How can I do that. 

     

     

  • Profile Image
    Chriistian
    Answered on January 21, 2016 at 09:22 PM

    Hi,

     

    You can inject this code to align the logos to the center:

    li#id_23 {

    margin-left: 70px;

    }

    li#id_22{

    padding-left: 0px!important;

    }

    li#id_21 {

    padding-right: 22px;

    }

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

      li#id_23 {

        margin-left:0px!important;

     }

    }

    Here's how you can inject css: How to Inject Custom CSS Codes

     

     

    Do let us know if you need further assistance,
    Regards.

  • Profile Image
    minemetitiri
    Answered on January 26, 2016 at 11:35 AM

    Hi,

    I made a change to one of the logos and noticed the alignment also changed. I injected to code above but it is now not working. I tried to modify the code within the injector box, but that did not help to make the adjustment I needed. Help, please.

     

    https://form.jotform.com/60038432878157

  • Profile Image
    victor
    Answered on January 26, 2016 at 02:47 PM

    After reviewing your form I noticed an error in your CSS code

    the field #input_36 is used correctly. The fields has a starting { but does not have an ending. I also noticed that the CSS code provided was not inserted. Can you please remove this tag and add the provided CSS, by my colleague.

    Please let us know if this helps.

  • Profile Image
    minemetitiri
    Answered on January 27, 2016 at 04:47 PM

    Hello, I removed the tag, and injected the code. The logos are still not centered. I need them to move right a little bit more. Where in the code can I address this? Am I just tweaking each photo individually in the code?

  • Profile Image
    victor
    Answered on January 27, 2016 at 06:10 PM

    To adjust the image to the right or left you just need to change the margin-left attribute of the li#id_23 field

    li#id_23 {

    margin-left: 70px; /*you can increase to move right or decrease it to move it left*/

    }

    li#id_22{

    padding-left: 0px!important;

    }

    li#id_21 {

    padding-right: 22px;

    }

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

      li#id_23 {

        margin-left:0px!important;

     }

    }

    Please let us know if you require additional assistance.