change product list view in mobile

  • Profile Image
    petrgoncharuk3
    Asked on February 21, 2021 at 05: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_

    Current view on mobile...:1613947183_6032e12fc85b5_

    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!!! :))))

  • Profile Image
    Jessica_H
    Answered 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.


  • Profile Image
    petrgoncharuk3
    Answered on February 22, 2021 at 04:36 AM

    Hi! It is needed for product list.

  • Profile Image
    Richie_P
    Answered on February 22, 2021 at 05: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.png

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

    Let us know if this fits your requirements.


  • Profile Image
    petrgoncharuk3
    Answered on February 22, 2021 at 06:18 AM

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

  • Profile Image
    Bojan_J
    Answered on February 22, 2021 at 06: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.

  • Profile Image
    Bojan_J
    Answered on February 22, 2021 at 07: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.png

    Let us know if this solution works for you.

  • Profile Image
    petrgoncharuk3
    Answered 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.pSomething 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?

  • Profile Image
    Bojan_J
    Answered on February 22, 2021 at 01: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.

  • Profile Image
    petrgoncharuk3
    Answered on February 23, 2021 at 11:04 AM

    Hi, Bojan! Do you have any updates?

  • Profile Image
    Bojan_J
    Answered 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.