Product list on mobile

  • ShopEForms
    Asked on July 5, 2020 at 2:40 AM

    Hi! Please check my form. How can I view all the details on the product list field when using mobile? When I view it, the view is cut.

  • Vanessa_T
    Replied on July 5, 2020 at 3:21 AM

    Kindly replace all your form's CSS into the one below to maximize the display space for mobile.

    .form-dropdown {

        width : 150px;

    }

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

    screen and (max-device-width: 767px) 

    and (orientation: portrait), 

    screen and (max-device-width: 415px) 

    and (orientation: landscape) {

      .form-section.page-section {

        padding: 0 1%;

      }

      .form-line {

        padding: 2% 0 !important;

      }

      .form-dropdown {

        width: 100%;

      }

    }

    How-to-Inject-Custom-CSS-Codes

  • ShopEForms
    Replied on July 5, 2020 at 5:29 AM

    Hi, 

    Thanks for the quick reply but the form is still not showing as intended. The view is still cut.


  • Girish JotForm Support
    Replied on July 5, 2020 at 7:45 AM

    Hello,

    Are you referring to the Category dropdown field that is cutting into the image?:

    15939492430507 6 Screenshot 10

    If yes, then please add this CSS code inside the existing code added into your form:

    #id_98.form-line.calculatedOperand {

    margin-top: 50px;

    }

    15939493370507 7 Screenshot 21

    RESULT:

    1593949456ShopEForm   SugarBites (1) Screenshot 32

    Let us know if this works out for you.

  • ShopEForms
    Replied on July 5, 2020 at 8:28 AM
    Pls see the image below.
    [image: image.png]
    ...
  • Sonnyfer JotForm Support
    Replied on July 5, 2020 at 8:57 AM

    Hello - Unfortunately, screenshots sent via email do not reach our Support System. Kindly resend it by following this guide: How-to-Post-Screenshots-to-Our-Support-Forum 

    We'll be waiting for your reply.

  • ShopEForms
    Replied on July 5, 2020 at 8:29 PM

    Please see the encircled ones.

    1593995318error Screenshot 10

  • Girish JotForm Support
    Replied on July 5, 2020 at 9:45 PM

    Hello,

    I have tested your form on an Android device and also on an iPhone. In both cases, I was able to view these fields correctly:

    15939998110607 3 Screenshot 10

    Please let us know the information below:

    1. Have you embedded this form on any web page? If yes, please let us know the web page URL to check.

    2. On which device are you checking this form - model, OS version and mobile browser used.

  • ShopEForms
    Replied on July 7, 2020 at 7:06 PM

    Hi!

    1. Have you embedded this form on any web page? If yes, please let us know the web page URL to check. - no not embedded anywhere.

    2. On which device are you checking this form - model, OS version and mobile browser used.

    HUAWEI Y9 PRIME

    Size 6.59 inches, 106.6 cm2 (~84.3% screen-to-body ratio)
    Resolution 1080 x 2340 pixels, 19.5:9 ratio (~391 ppi density)

    Your screenshot above also shows a cut version for both android and iphone. All products should show the qty and flavor.


    Thank you for your help.

  • Vanessa_T
    Replied on July 7, 2020 at 8:19 PM

    Kindly check this demo form: https://form.jotform.com/201888144656969

    Product list on mobile Image 10

    If this looks fine on your end, you can clone it back to your account by following this guide:

    How-to-Clone-an-Existing-Form-from-a-URL

  • ShopEForms
    Replied on July 7, 2020 at 11:28 PM
    thank you!
    ...