Form showing differently on two mediums.

  • Profile Image
    MarinLatinFoods
    Asked on June 18, 2020 at 05:49 PM

    Hi.

    I inserted our form here: https://www.jotform.com/form/201535106259046?language=en and it looks fine, however,
    when inserting the html code on my other website here: https://marindelaislaverde.com/contacts.html / click on "Send Resume," it looks terrible. See attached screenshot of both windows.

    I don't know how to fix this.

    ~ Paul

    Screenshot
  • Profile Image
    Jed_C
    Answered on June 18, 2020 at 09:45 PM

    It looks like you have embedded the form using source code. It's possible that there were some script conflicts with one of your JS libraries. Can you try replacing it with iframe and see if that spacing and header is still present?

    Guide: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

    Looking forward for your response. 

  • Profile Image
    MarinLatinFoods
    Answered on June 19, 2020 at 09:56 AM

    Thank you Jed, however, there is still one more issue.

    The title "Information Form" is smaller using the iframe compared to the other one. Please review the two links I provided in my first post.

    Thanks.

  • Profile Image
    Lorenz_A
    Answered on June 19, 2020 at 10:51 AM

    Greetings,

    Please inject the following CSS codes into your form builder.

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

    #hearder_1{

    font-size: 1.714em !important;

    }

    }

    How-to-Inject-Custom-CSS-Codes

    Let us know if you need any further assistance. 

  • Profile Image
    MarinLatinFoods
    Answered on June 19, 2020 at 12:26 PM

    Nothing changed.

    See: https://marindelaislaverde.com/contacts.html / click on "Send Resume,"
    ("Information Form"
     lettering is still smaller than the one in the link below)

    It should look like this: https://www.jotform.com/form/201535106259046?language=en

    ~ Paul

  • Profile Image
    Lorenz_A
    Answered on June 19, 2020 at 12:38 PM

    Hi,

    I had a typo on the above code I provided, it's supposed to be #header_1 not #hearder_1.

    Please use the code below instead. 

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

    #header_1{

    font-size: 1.714em !important;

    }

    }

    Let us know how it goes.

  • Profile Image
    MarinLatinFoods
    Answered on June 19, 2020 at 01:56 PM

    Much, much better.

    Thank you!