CSS: Make products display side by side in Mobile View

Hello,

Please, I need help to adjust products like side by side for phones, as they are for tablets and computers of a form which has "Product List” function.

Products on tables:

Products on phones:

Thank you.

Hi Carlos,

Thanks for reaching out to Jotform Support. I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Hi Carlos,

I cloned your form to test it, and I easily replicated the issue. Adding the following code to your form will help you make your products display side-by-side in mobile view.

/* Make products display in 2 row (side-by-side) in Mobile View - Ticket #13664071 */

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

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

  flex-direction: row !important;

 }



 .product-container-wrapper {

  flex-direction : row;

 }



 .form-product-item {

  width : 50% !important;

 }



 ul.form-section {

  padding: 0px !important;

 }



.card-3col .form-product-item.new_ui.show_image {

  padding: 3px !important;

 }



}

/* Ends here */

Here's the result:

Adding the code to your form is easy, let me show you how:

1. In Form Builder, click on Paint Roller icon in the upper-right corner.
2. Click on Styles.
3. Scroll down and add your CSS code under Inject Custom CSS. All changes are saved automatically.

You can check my test form to see, and we also have a guide on How to Inject Custom CSS that you can check out.

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

Thank you so much, Angelica.