change product list view in mobile

  • petrgoncharuk3
    Asked on February 21, 2021 at 5:40 PM

    Hi! I want to keep desktop view on the mobile devices. And i really don't know how to make it with css. Can you please help me? Because I tried everything and need it to be done in 12 hours :)))
    Sending you screenshots. Here is normal pc view (I want to make it exactly the same on mobile, sizes of icons and text can be reduced if needed).1613947025 6032e0919e8a0  Screenshot 10

    Current view on mobile...:1613947183 6032e12fc85b5  Screenshot 21

    I think you see the difference. Also I wanted to say that there is weird space on the right from image in mobile view. And maybe that is the reason why I can't place the elements like in pc view.

    P.S. Please, Save me!!! :))))

  • Jessica JotForm Support
    Replied on February 22, 2021 at 12:52 AM

    Hi petrgoncharuk3, thank you for reaching us.

    The white space beside image is due to the code under @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape).

    To clarify, would you like only the product list to display similar to Desktop view, or would you like to apply the desktop view to all your field within your form? Kindly noted that your form is optimized for all screen sizes. The form will not fit properly if it retains the desktop view.

    We will wait for your updated response.


  • petrgoncharuk3
    Replied on February 22, 2021 at 4:36 AM

    Hi! It is needed for product list.

  • Richie JotForm Support
    Replied on February 22, 2021 at 5:08 AM

    You may try this custom CSS

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

    .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui.show_image .p_image {

       float: left;

         width: 150px !important;

    }

    .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui .form-product-container .form-product-name {

       margin-left: -50px !important;

    }

    }

    Screenshot:

    1613988486 60338286ebde1 1 Screenshot 10

    Guide:https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    Let us know if this fits your requirements.


  • petrgoncharuk3
    Replied on February 22, 2021 at 6:18 AM

    Thanks! But is there any possibility to make the structure exactly like on pc view (sizes can be reduced).

  • Bojan Support Team Lead
    Replied on February 22, 2021 at 6:51 AM

    Greetings.

    Please allow me some time to find the solution for you.

    As soon as I have more information, I'll get back to you.

    Thank you for your patience.

  • Bojan Support Team Lead
    Replied on February 22, 2021 at 7:15 AM

    Please try to add the following CSS to your form:

    @media screen and (max-width: 480px) {
     .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui {
      border: none;
     }
     .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui .p_col {
      position: inherit;
     }
     .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui .p_col {
      position: inherit;
      display: block;
      width: 35px;
      display: block;
      float: left;
     }
     .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui.show_image .p_image {
      max-width: 72px;
      max-height: 72px;
      min-width: 80px;
      display: block;
      margin: 0;
      float: left;
      padding-left: 0;
     }
     .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui.show_image .image_area {
      min-height: 72px;
      max-width: 72px;
     }
     .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.show_image .p_checkbox {
      margin-top: 22px;
     }
     .form-line[data-payment="true"] .p_item_separator {
      border-top-width: 1px !important;
      border-top-style: dashed !important;
      opacity: 0.8 !important;
      margin: 2px 0px 2px 37px !important;
      display: block !important;
      width: 100% !important;
     }
    }

    It should result in the following:

    screenshot 3836 Screenshot 10

    Let us know if this solution works for you.

  • petrgoncharuk3
    Replied on February 22, 2021 at 11:58 AM

    Hi! Thank for your help! It is much better now! The final step I need is to reduce padding between sub-label of options and options containers and to put everything on one hight.
    I mean that structure-


    Image title and price
    Image options

    It is about that i need image centered with that elements on the right.
    1614012985 6033e2397933a Screenshot555 Screenshot 10Something like this. I think I will be able to enlarge the image to fit perfectly. And can you please tell me how to delete the sub-label of options?

  • Bojan Support Team Lead
    Replied on February 22, 2021 at 1:31 PM

    Greetings.

    Please allow me some time to provide you with a code. As soon as I have more information, I'll get back to you.

    Thank you for your patience.

  • petrgoncharuk3
    Replied on February 23, 2021 at 11:04 AM

    Hi, Bojan! Do you have any updates?

  • Bojan Support Team Lead
    Replied on February 23, 2021 at 12:19 PM

    Greetings.

    I apologize for the delay.

    Please try to use the following CSS instead of the previous one:

    @media screen and (max-width: 480px) {
     .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui {
     border: none;
     }
     .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui .p_col {
     position: inherit;
     }
     .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui .p_col {
     position: inherit;
     display: block;
     width: 35px;
     display: block;
     float: left;
     }
     .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui.show_image .p_image {
     max-width: 72px;
     max-height: 72px;
     min-width: 80px;
     display: block;
     margin: 0;
     float: left;
     padding-left: 0;
     }
     .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui.show_image .image_area {
     min-height: 72px;
     max-width: 72px;
     }
     .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.show_image .p_checkbox {
     margin-top: 22px;
     }
     .form-line[data-payment="true"] .p_item_separator {
     border-top-width: 1px !important;
     border-top-style: dashed !important;
     opacity: 0.8 !important;
     margin: 2px 0px 2px 37px !important;
     display: block !important;
     width: 100% !important;
     }
     .form-product-description {
      display: none !important;
     }
     .form-product-container span:first-child {
      display: inline !important;
     }
     .title_description {
      float: left !important;
      margin-right: 10px !important;
      margin-top: 4px;
     }
    }

    Let us know if any additional modifications are needed.