Media queries inside "Thank You" page

  • Profile Image
    igjot
    Asked on March 18, 2020 at 01:15 PM

    I'm trying to add a <style> to my Thank You page to then have a specific media query where I resize an image but it looks like Jotform ignores and removes my <style>

    Is there a way to have this?

  • Profile Image
    JohnRex
    Answered on March 18, 2020 at 01:49 PM

    Hello @igjot - You can assign a class/ID selector of the div in used in the Thank You page then set its properties into the CSS tab of the form.

    for example, I assigned ID "test" for this div in the Thank you page:

    <p style="text-align: center;"><img src="https://cdn.jotfor.ms/img/check-icon.png" alt="" width="128" height="128" /></p>

    <div id="test" style="text-align: center;">

    <h1 style="text-align: center;">Thank You!</h1>

    <p style="text-align: center;">Your submission has been received.</p>

    </div>

    Then I injected the CSS in the CSS tab of the form:

    @media screen and (max-width: 40em) {
      #test {
        background-color: blue;
      
    }
    }

    15845536592203405.png

    This will make that div's background to be blue if the form is submitted on a mobile phone.

    GUIDEHow-to-Inject-Custom-CSS-Codes

    Please try that and let us know how it goes.

  • Profile Image
    igjot
    Answered on March 18, 2020 at 02:52 PM

    Thanks, does that works if the form was downloaded?  Should I create this class inside the form html instead?

  • Profile Image
    IvayloK
    Answered on March 18, 2020 at 03:20 PM

    Yes, you should be able to make the adjustments and then download the source code. The changes should be applied.

    Have you embedded your form on a website? If so, please provide the link, so we can test it.

    We will wait for your response.

  • Profile Image
    igjot
    Answered on March 18, 2020 at 04:16 PM

    I can't share links even if the thread is private but thanks guys, that worked for me.  My only issue is that we downloaded the form and are making changes to the html already so we can't just overide but still, it worked.

    You've been very helpful.  


    Cheers

  • Profile Image
    KrisLei
    Answered on March 18, 2020 at 05:01 PM

    Glad to hear it works.

    Just open a new thread, if you need further assistance.