Product List: Single column on a horizontal mobile screen when it should be split into 3

Attached above is the screenshot for Form Preview for Mobile Phone in Horizontal Orientation. All looks perfect with 3 Items displaying in a single row. However, the actual view from the Mobile Phone is displaying otherwise. See Below.

Please advise solution for this matter. Thank you

Hi Francis,

Thanks for reaching out to Jotform Support. I understand that the product list are expected to split in 3 columns when viewed on mobile horizontally. By default, the form responds to the screen size it is being viewed from automatically. When I tested your form and tested it on different screen sizes, everything seems to be working as expected. Please check out the screencast below for my result:

I cleared your form's cache which should help. Can you try it again and see how it goes? If the same thing happens again, could you share with us the model of the device you've tested this with and its set resolution so we can investigate further?

Keep us updated and let us know if you need any help.

I have tested again using my Iphone 13 Pro. The outcome is still the same. Showing only 1 product instead of 3.

As for resolution, where do i find from my phone ?

Hi Francis,

Thanks for getting back to us. I tested your form on an iPhone 13 Pro and had the same issue. After investigating further, I found a solution. We just need to apply a custom CSS code to the form. Let me show you how to do that:

• In Form Builder, click on the Paint Roller icon on the right.
• Next, under the Styles tab, paste the following codes into the CSS box.

/* ensure 3 columns in product list when using horizontal mobile view - 14008491*/

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

 .card-3col span.form-product-item {

  width: calc(33.333% - 8px) !important;

 }

 .card-3col div[data-wrapper-react="true"], .card-2col div[data-wrapper-react="true"] {

flex-direction: row !important;

}

}

/* Ends here */

That's it. Feel free to test this cloned demo form or clone it to your account to inspect it further. We also have a guide on How to Inject Custom CSS Codes that you can check out.

Give it a try and let us know if you need any help.

After inserting the CSS, the display works well in Horizontal Position. Thank you.

Unfortunately , the vertical orientation now displaying " Disorientated" both in Mobile and Form Preview.

Please advise. Thank you

Hi Francis,

I'm sorry for the confusion. Please try the updated CSS code below, instead of the previous one.

/* ensure 3 columns in product list when using horizontal mobile view - 14008491*/

@media screen and (max-device-width: 415px) and (orientation: landscape) {

 .card-3col span.form-product-item {

 width: calc(33.333% - 8px) !important;

 }

 .card-3col div[data-wrapper-react="true"], .card-2col div[data-wrapper-react="true"] {

flex-direction: row !important;

}

}

/* Ends here */

Here's how it would work both in portrait and landscape mode:

Give it a try and let us know if you need any help.

Works perfect now. Thank you very much.