What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    @Media Rule CSS styles not working properly on specific displays

    Asked by emilyjane on March 23, 2015 at 01:26 AM
    One thing that Im having trouble with is using the @media rule in the injected CSS area.  I added some styles that are only supposed to apply to screens up to 720px but they are applying to larger ones as well. styles for .form-all & .form-input. Im not sure what Im doing wrong.  Would you mind having a look?

    Thanks,

    Emily

    script iframe
  • Profile Image
    JotForm Support

    Answered by Charlie on March 23, 2015 at 01:40 AM

    Hi Emily,

    I've cloned your form "Custom Quote Form" and checked the custom CSS code.

    May I know what it should looked like?

    Here's how I will edit your code:

    @media screen and (min-width: 10px) and (max-width: 540px){

        .form-all {

            margin : 0 !important;

            width: 400px !important;

        }

        .form-input {

            width : 100% !important;

            padding : 0 !important;

            display : block !important;

            margin-top : 25px !important;

        }

     

    }

     

    @media screen and (min-width: 541px) and (max-width: 720px){

        .form-all {

            margin : 0 !important;

            width: 400px !important;

        }

        .form-input {

            width : 100% !important;

            padding : 0 !important;

            display : block !important;

            margin-top : 25px !important;

        }

    }

    I would add a width so that it will have it's own size for each display, also make sure to add !important on each styling so that it will force the styling on it.

    Another recommendation is to add a specific @media rule for higher display, here's how I will add it:

    @media screen and (min-width: 721px) {

     

    }

    That should restrict all displays with width 721px and up to have a specific styling on it.

    I hope this helps. Do let us know if this works.

    Thank you.

  • Profile Image

    Answered by emilyjane on March 23, 2015 at 05:50 PM

    Hi Charlie,

    I added your suggested code and included a @media screen and (min-width: 721px)   section as well.  BUt I am having the same issue where styles that I was trying to apply just for smaller screens (slightly different margins, paddings, etc. are appearing on the 721px + screens and causing things to look a little janky.

    Here is an example of how it should look on a large screen (and does without @media screen css):

     

    Here is an example of how it looks with the @media css:

     

     

    You can have a look on the live page if its helpful:  http://pcp-test.myshopify.com/pages/custom-quote

     

    Thanks so much,

    Emily

     

  • Profile Image
    JotForm Support

    Answered by jonathan on March 23, 2015 at 07:25 PM

    Hi Emily,

    Actually even on my desktop browser, I can also see display issue on the embedded form on your website

     

    Can you please try first re-embedding the form http://www.jotformpro.com/form/50687173251961 on your website using instead its iframe code.

    Follow this user guide: -Getting-the-Form-iFrame-Code

    Make sure to clear first all previous script embedded codes before re-embedding using the iframe.

    Let us know if issue remains.

    Thanks.

     

     

  • Profile Image

    Answered by emilyjane on March 23, 2015 at 07:39 PM

    It is now an iframe.  The issue is still happening.

    Thanks,

    Emily

  • Profile Image
    JotForm Support

    Answered by Charlie on March 23, 2015 at 10:32 PM

    Hi Emily,

    Could you try cloning this form http://form.jotformpro.com/form/50818014464957. I have edited the custom CSS code there, you can try adjusting the values there. The reason might be because there is not max-width declared, here's the 3rd media rule I'm using:

    @media screen and (min-width: 721px) and (max-width:3400px)

    Also, another class selector that you can use are the following:

    .jotform-form {

     

    }

    .supernova {

     

    }

    You can declare specific widths there, it's better if you can have it fixed on "px" rather than "%".

    See if that works.

    Kind regards.

  • Profile Image

    Answered by emilyjane on March 23, 2015 at 10:50 PM

    I tried using your suggested @media screen and (min-width: 721px) and (max-width:3400px) and the same problem is occuring.

    How do I clone http://form.jotformpro.com/form/50818014464957?  I dont see it in the "My Forms" section. 

    The reason Im using percentages rather than absolute pixels is Im copying the way the current forms are on my site are written and they use percentages.  But if its neccesary I can deviate from that.

     

    Thanks,

    Emily

  • Profile Image
    JotForm Support

    Answered by Charlie on March 23, 2015 at 11:58 PM

    Hi Emily,

    Sorry about that. Here's the guide on how to clone my form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

    Please try making the suggested changes and see if it works. Under the CSS tab in the form designer there are already field sizes that are outside the @media rule, I believe this is the one that is being prioritize when it comes the implementing the changes, you could try wrapping those CSS codes inside the @media rule so that we can make a stricter rule.

    But first, do try making the changes using the cloned form that I have, also try adding a width on the class selectors that I mentioned earlier, here they are:

    .jotform-form {

    width: specify width here !important;

    }

    .supernova {

    width: specify width here !important;

    }

    I hope this helps. Do embed the form in your website so that we can see the actual change and make adjustments to it.

    Kind regards

  • Profile Image

    Answered by emilyjane on March 24, 2015 at 03:05 PM

    I will go ahead with your advise and let you know what happens.  BUt it is worth noting that the formatting issues are definitely coming from the CSS contained in the @media rule for smaller screens.  I can see it in my development tool (images attached) and when I remove this CSS everything looks fine on larger screens.  To clarify about the screenshots, this is what I see in my developer tools with a screen width above 1200px.

    Thank you,

    Emily

  • Profile Image

    Answered by emilyjane on March 24, 2015 at 03:19 PM

    Sorry Charlie, Im not quite understanding what the use for this other form (http://form.jotformpro.com/form/50818014464957. ) that you suggest cloning.  I am seeing the same issues on this form that I have on mine.

    Can you explain?

    Thanks,

    Emily

  • Profile Image
    JotForm Support

    Answered by Kiran on March 24, 2015 at 04:58 PM

    Please allow me some time to check on this and get back to you with relevant information.

    Thank you for your patience.

  • Profile Image

    Answered by emilyjane on March 26, 2015 at 04:51 PM

    Thank you

  • Profile Image

    Answered by emilyjane on March 27, 2015 at 10:12 PM

    Can you give me an estimate of when this issue will be looked into.

    Thank you,

    Emily

  • Profile Image

    Answered by emilyjane on March 30, 2015 at 05:29 PM

    I have a site that is supposed to launch and I am holding back because of this.  Will this be addressed soon?  Or should I abandon the responsive component?

    Thanks

    Emily

  • Profile Image
    JotForm Support

    Answered by Kiran on March 30, 2015 at 05:46 PM

    Hello Emily,

    Sorry for the delay in the response. I see that there is some other CSS code added to your JotForm which may be overriding the width from media section. Also, I see that the responsive option is also not enabled on your JotForm. I've cloned your JotForm and tried to edit the JotForm. Could you try cloning this JotForm and see if that works well on your webpage?

    http://www.jotformpro.com/form/50886388238975

    Let us know if you need any further assistance. We will be happy to help.

    Thanks.

  • Profile Image

    Answered by emilyjane on March 30, 2015 at 06:09 PM

    I am seeing the same issue with your cloned form as I had with my original.  You can preview the cloned form on my site: http://pcp-test.myshopify.com/pages/custom-quote .  When I view this on very large browser the styles for smaller sizes are still showing up.  I am attaching a screenshot of my developer tool with your cloned site, while Im using a large screen.

     

    As for my custom CSS added to my original form being the problem, Im pretty sure its not true becasue when I delete the @media rules everything looks perfect.

     

    Thanks,

    Emily

  • Profile Image

    Answered by emilyjane on March 31, 2015 at 02:13 PM

    Any progress on this?

  • Profile Image
    JotForm Support

    Answered by Charlie on March 31, 2015 at 02:55 PM

    Hi,

    Upon checking the cloned form of my colleague embedded in your website, it seems like the form is not being cut off now.

    Also, please do not use the cloned form of my colleague in your website, the email notifications and submissions will directly be sent to my colleagues account and not yours, you can clone his form using this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Also, the styling that you are seeing in your developer tool may change, in this case, the form is enabled to be mobile responsive, which means the form will have default styling based from the responsiveness of it and not specific to the @media rule that you declared.

    There is also a difference with using min-width and min-device-width. You may also check this guide on how to add a view port to your website to declare adjustments on mobile devices: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport?hl=en

    If you have specific styling, do let us know so that we can better test it. Example, what font size or what color the font is when viewed on a smaller device. But enabling the mobile responsiveness should automatically adjust the layout of the form.

    Kind regards.

  • Profile Image

    Answered by emilyjane on March 31, 2015 at 03:13 PM

    Hi Charlie,

    The issue I was seeing with the form wasnt just it getting cut off, it was also some spacing differences. For example how the labels for the field are touching the field instead correct padding.

     

    I have edited my original form and I am hosting it on a new page.  to make it more easy to see the issue I have set the background color as red only for smaller media:

     

    @media screen and (min-width: 10px) and (max-width: 540px){

        .form-all {

            margin : 0 !important;

            width : 400px !important;

            background-color:red;

     

        }

     

    BUt if you look at the page (  http://pcp-test.myshopify.com/pages/temp-page ) you can see that the background appears red despite screen size.

     

    I understand not to use your cloned forms when the site is live, but for the purpose of this troubleshooting I currently have my form hosted here: http://pcp-test.myshopify.com/pages/temp-page

    and the cloned form hosted here: http://pcp-test.myshopify.com/pages/custom-quote

     

    Thank you!

    Emily

  • Profile Image
    JotForm Support

    Answered by Kiran on March 31, 2015 at 05:02 PM

    As per the CSS setting, the background color is changing to Red when the width of the form is changed 540px or less.

     

    As I inspect the website code, it seems the issue with the space allotted to the div element where the form is embedded. The product-images div is allotted 70% and the product-form div is allotted with 30% which is 378px for div and 348px for the form after removing the left-padding 30px. This is resulting to change the background color to red. I've tried increasing the width of the form embedded div from code inspector and the form changed to normal. 

    The Form Designer shall add the necessary CSS code with the settings made using the options available in which the additional code may be conflicting each other. It is recommended to make the changes from the Form Designer and enabling responsive form. The issue with the label spacing can be adjusted from the Form Designer. 

    Hope this information helps.

  • Profile Image

    Answered by emilyjane on March 31, 2015 at 05:28 PM

    OK, I think I understand now the @media screen rules that I am familiar width implement different CSS depending on the width of the SCREEN.  But you are saying that these @media rules implement different CSS depending on the width of the FORM?  Is that correct?

    Emily

  • Profile Image
    JotForm Support

    Answered by Kiran on March 31, 2015 at 05:43 PM

    Your understanding with media css is correct. As you know that the media rule is used to define different style rules for different media types/devices and can be used to check many things, such as width and height of the browser window, width and height of the device, orientation, resolution, etc. Since the form is embedded using iframe, the rule is being implemented based the width of embedded space instead of total screen.

  • Profile Image

    Answered by emilyjane on March 31, 2015 at 07:31 PM

    I see.  If I use a different technique of embedding other than iframe will the @media rule relate to the browser window width rather than the form width? 

     

    For instance: <script type="text/javascript" src="//form.jotformpro.com/jsform/50687173251961"></script>

    Thanks,

    Emily 

     

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 31, 2015 at 09:08 PM

    @emilyjane

    That also depends on the media query you are using.

    Example:

    You are currently using @media screen and (max-width:480px), the max-width targets the display area, e.g. the browser. Whenever the browser is re-sized to the defined width, this will be triggered.

    While @media screen and (max-device-width:480px) targets the width of the device's entire rendering area, i.e. the actual device screen.

    With regards to your question, you are definitely right with that but you still have to consider the parent element where you have embedded that code.

    Example:

    If you embed that code alone, it will consume the entire browser width so the width depends on the browser.

    However, if you embed that form into an element with width defined, the parent width matters. 

    <div style="width:400px;">

    <script type="text/javascript" src="//form.jotformpro.com/jsform/50687173251961"></script>

    </div>

    Hope this clears your question. Thank you!