Inventory Widget: How do I display the widget properly on mobile devices?

  • Profile Image
    clarkschool
    Asked on August 18, 2017 at 03:39 PM

    Please help me adjust the width of my inventory widgets: https://form.jotform.us/72294498260161

    Right now, they are too wide and get cut off on the right side on the mobile view. Thanks!

  • Profile Image
    Kevin_G
    Answered on August 18, 2017 at 03:50 PM

    Please inject the following CSS code to your form in order to display the widgets properly on mobile devices: 

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

      iframe[src*="inventory"]{

          width: 88% !important;

          height: 80px !important;

      }

    }

    This guide will help you injecting the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    You can see the result on this cloned form of yours: https://form.jotformpro.com/72296196056969

    I hope this helps. 

  • Profile Image
    clarkschool
    Answered on August 18, 2017 at 03:59 PM

    Thanks for your quick response! I tried the code but it is not doing anything when I use the advanced designer to look at the mobile view in portrait mode. I'm wondering if there are other CSS codes already in the form that are causing a conflict??

  • Profile Image
    Kevin_G
    Answered on August 18, 2017 at 04:11 PM

    I have reviewed your form and noticed the code is being applied: 

    Do note that you may either increase or decrease the width and height values, this way your fields display properly and they do not cut off on mobile devices. 

    Please let us know how it goes.