How to make some images appear when the form is displayed on mobile?

  • Matthieuboz
    Asked on March 28, 2018 at 5:09 AM

    Hi Jotform team!

    I've got this issue: on mobile i can't display the gifts i intend to give when the form is filled, when it is displayed on mobile. 

    I show the on the background on the right of the form, but it can only be shown on desktop.


    Is there a way so that i could make an image appear when the form is displayed on a mobile device ?


    Thank you very much!


    Page URL: https://paroledemamans.com/moments-de-vie/T%C3%A9l%C3%A9chargez-gratuitement-vos-magazines-naissance
  • Welvin Support Team Lead
    Replied on March 28, 2018 at 9:26 AM

    It is a background image and it is automatically scaled on mobile devices. I would suggest putting the same image in the form itself as a field, by using our Image tool:

    How to make some images appear when the form is displayed on mobile? Image 1 Screenshot 20

    Then do a trick using CSS to hide the image field on big screens. Here's a clone version of your form with these changes:

    https://form.jotform.com/80863326829971

    View this form on both mobile and desktop to see the difference. 


  • Matthieuboz
    Replied on April 5, 2018 at 9:43 AM
    Hello Welvin,
    8 days ago you changed my life by telling me it was possible to do a css
    trick in order to display images responsively.
    Could you please give me the code you used and tell me where to put it ?
    Thank you so much!
    Matthieu
    *Matthieu BOZ*
    Directeur Artistique
    [image: mobile] 06 81 04 54 22
    [image: office] 01 55 65 05 5049 rue Marius Aufan
    Levallois-Perret
    [image: Skype]
    matthieuboz
    2018-03-28 15:26 GMT+02:00 JotForm :
    ...
  • TREVON
    Replied on April 5, 2018 at 11:05 AM

    Kindly find CSS code below used on the form shared by my colleague.

     
    .form-dropdown option {
        background-color : transparent;
    }
     
    div#cid_37 .form-sub-label-container {
        width : 32% !important;
    }
     
    [data-type="control_birthdate"] .form-sub-label-container:last-child, [data-type="control_birthdate"] .form-sub-label-container:first-child {
        margin-right : 0px !important;
    }
     
    [data-type="control_birthdate"] .form-sub-label-container:nth-child(2) {
        margin : 0px 1% !important;
    }
     
    [data-type="control_birthdate"] .form-sub-label-container:last-child {
        float : right !important;
    }
     
    .jotform-form {
      float: left;
    }
     
     
     
    .form-section.page-section {
        border : 1px solid #4bc0de;
        float : right;
        border-radius : 10px;
    }
     
    .form-header-group {
        border-radius : 9px;
    }
     
    .form-input-wide {
        border-radius : 0px;
    }
     
    .form-all {
        border-radius : 10px;
        border : 1px;
        box-shadow : 20px;
    }
     
    .form-dropdown {
        height : 30px;
    }
     
    .form-textbox {
        height : 30px;
    }
     
    @media only screen and (min-device-width: 1024px)  {
    .jotform-form li#id_51,
    .jotform-form li#id_52,
    .jotform-form li#id_53 {
      display: none;
    }
    }
     

    Kindly use the guide below showing how you can inject CSS code to your form.

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

    Kindly do let us know if you need further assistance on the same.