How can I make a graphic that is inserted at the top of the form in your design mode resize to different sizes based on the viewport width?

  • Profile Image
    yajohnson37068
    Asked on January 29, 2016 at 01:10 PM

    When I look at the Reeves Contact Form on a desktop, the image is fine. It is way too large on a cell phone.

    The website address is supplied below. The form is linked to by the email graphic:

    <a target="_blank" href="https://form.jotform.com/60146429307150" rel="nofollow noopener" title="Click to Send Email"><img src="images/email-address.jpg" style="width: 85%; border:none; margin:0;"></a>

  • Profile Image
    Mike_G
    Answered on January 29, 2016 at 04:55 PM

    I have made a clone version of your form and went to its designer page. I can see that you have set the image as a background image which made it appear on the background of the form. 

    If you want to have it as a header, I would suggest you try this:

    First, remove the image you set as a background image of the form.

    Then, since you have the link to the image when you first uploaded it as a background of your form. https://files.jotform.com/jufs/yajohnson37068/form_files/header-reeves.jpg

    You can use that link to insert the image as the header of your form. Here's how:

     

    Above you will notice that I have used 378 as the width of the header, it is because your form's with is 450. Then, the padding of your fields for both sides totals to 72(36 each side). So that would be 450 - 72 = 378.

    Let us know if you need any further assistance. Thank you.

  • Profile Image
    yajohnson37068
    Answered on January 29, 2016 at 06:04 PM

    Mike,

    This gets me closer, but your size for the graphic 378 x 210 is out of proportion when I do it. If I leave the width blank and check constrain it look correct. But the graphic is too wide when viewed on an iPhone 6. It does not appear to be adjusting to the size of the view port at all even though I have selected responsive in the Preferences.

  • Profile Image
    Mike_G
    Answered on January 29, 2016 at 09:31 PM

    To fix that, we need the help of CSS codes which you can inject to your form. 

    Click this link to know how you can inject Custom CSS to your forms.

    Here are the CSS codes that you need to inject to your from:

    @media only screen

    and (min-device-width : 375px)

    and (max-device-width : 667px) {

    #id_10{

    padding-left: 0px !important;

    padding-right: 0px !important;

    }

    #id_10 img{

    width: 370px !important;

    }

    }

    Here's how it should look like on an iPhone 6.