Product List Mobile View

I'm looking for custom CSS that I can inject to edit the layout of the mobile view of a product list. It's currently set as single (one product at a time) & I'd like to make it to where there are two to look more like the desktop version (which is three).

Hi Kimberly,

Thanks for reaching out to Jotform Support. We can adjust the products displayed on mobile by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

@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 div[data-wrapper-react="true"], .card-2col div[data-wrapper-react="true"] {

        flex-direction: row;

    }

}





@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 .form-product-item.new_ui, .card-2col .form-product-item.new_ui {

        width: 48%;

        margin: 2px !important;

    }

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Result:

Give it a try and let us know how it goes.

Perfect! Do you have any code to make the description text smaller? You can see on the Fragrance Flight option, it's larger than the title text.

Hi Kimberly,

To fix the product description text, we'll just need to add custom CSS to your form. Check out the steps below to see how it's done:

1. First, copy this code:

.form-product-description {

    font-size: 11px !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Here's the cloned version of the form that you can test. 

Give it a try and let us know how it goes.