@Media Rule CSS styles not working properly on specific displays

  • emilyjane
    Asked on March 23, 2015 at 1: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

  • Charlie
    Replied on March 23, 2015 at 1: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.

  • emilyjane
    Replied on March 23, 2015 at 5: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):@Media Rule CSS styles not working properly on specific displays Image 1 Screenshot 30

     

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

     

    @Media Rule CSS styles not working properly on specific displays Image 2 Screenshot 41

     

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

     

    Thanks so much,

    Emily

     

  • jonathan
    Replied on March 23, 2015 at 7:25 PM

    Hi Emily,

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

    @Media Rule CSS styles not working properly on specific displays Image 1 Screenshot 20

     

    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.

     

     

  • emilyjane
    Replied on March 23, 2015 at 7:39 PM

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

    Thanks,

    Emily

  • Charlie
    Replied 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.

  • emilyjane
    Replied 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

  • Charlie
    Replied 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

  • emilyjane
    Replied on March 24, 2015 at 3: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

    @Media Rule CSS styles not working properly on specific displays Image 1 Screenshot 30@Media Rule CSS styles not working properly on specific displays Image 2 Screenshot 41

  • emilyjane
    Replied on March 24, 2015 at 3: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

  • Kiran Support Team Lead
    Replied on March 24, 2015 at 4:58 PM

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

    Thank you for your patience.

  • emilyjane
    Replied on March 26, 2015 at 4:51 PM

    Thank you

  • emilyjane
    Replied 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

  • emilyjane
    Replied on March 30, 2015 at 5: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

  • Kiran Support Team Lead
    Replied on March 30, 2015 at 5: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.

  • emilyjane
    Replied on March 30, 2015 at 6: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,

    Em@Media Rule CSS styles not working properly on specific displays Image 1 Screenshot 20ily

  • emilyjane
    Replied on March 31, 2015 at 2:13 PM

    Any progress on this?

  • Charlie
    Replied on March 31, 2015 at 2: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.

    @Media Rule CSS styles not working properly on specific displays Image 1 Screenshot 20

    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.

  • emilyjane
    Replied on March 31, 2015 at 3: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.

    @Media Rule CSS styles not working properly on specific displays Image 1 Screenshot 20

     

    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

  • Kiran Support Team Lead
    Replied on March 31, 2015 at 5: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.

    @Media Rule CSS styles not working properly on specific displays Image 1 Screenshot 30

     

    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. 

    @Media Rule CSS styles not working properly on specific displays Image 2 Screenshot 41

    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.

  • emilyjane
    Replied on March 31, 2015 at 5: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

  • Kiran Support Team Lead
    Replied on March 31, 2015 at 5: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.

  • emilyjane
    Replied on March 31, 2015 at 7: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 

     

     

  • Elton Support Team Lead
    Replied on March 31, 2015 at 9: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!