How do I make the table responsive?

Is there a way to make the table that I had to use to create my products responsive? I'm unable to use your Product List option due to limitations with pricing. So, I'm using the Paragraph element to create the product and then calculation conditions for pricing. Your help is greatly appreciated!

Hi,

We can try to provide CSS codes to edit the field.

How exactly would you like the field to appear on mobile?

Looking forward to your reply.

All of my products are created with a one row, two column table. On a desktop/computer, the image should be on the left and the bullet point description is on the right. I'd like the image to stack above the bullet points when viewing on a phone. Here is a mock-up. Thank you for your help!

I did check your form and found that you have added the table rows and columns in the paragraph field. To make it mobile responsive as you want, the table structure needs to replaced with div tags.

Will it be acceptable if we change the table with div but retain the layout?

We will wait for your response.

Yes, that is absolutely acceptable. I really appreciate your help, thank you!!! If you're able to just fix one, I should be able to fix the others.

First, try deleting the Table in the source code:

After that close the source code window and open it again to add these codes:

That didn't work. It's still compressing them and putting the image next to the bullet points rather than stacking the cells. I just tried it with the High Definition Photos product. I want it to appear as my example above when viewed on a phone....

1. Title
2. price
3. photo
4. description

Stacked on top of each other.

Please allow me some time to take a look at it.

Thanks.

What you can do is insert two separate paragraph elements. One for the Photo and another for the text this way:

Let us know if this would work for you.

Thanks.

No, it doesn't. I'd like the image to be next to the bullet points on a computer, but stack when on a phone. It's a LONG form.

You can insert the text and then insert the image on top of that:

Unfortunately, that is not possible to stack the image on only mobile devices and not on the desktop automatically. It will appear like this on the mobile device.

If you want to stack the image only on the mobile then for each of the Paragraph elements we need to inject CSS. May we know how many paragraph elements you would be having on the form?

Thanks.

Right now, there are 10, but we will be adding a few more in the next month or so when we add a few more products. If you can write the code, I know how to enter things into the CSS of the form as well as html in the paragraph box for each. Thank you! We are a photography company, so it's very important that the products are visually displayed well.

Hi again,

I've successfully resolved the issue as follows:

1) I converted the tables to divs, and attributed those divs to a class after my name. 😃 This is done to all paragraphs.

2) I've injected the following CSS code into the form to affect only the mobile view:

@media only screen and (max-width: 600px) {.amin_n { display: contents !important;}ul {   display: block !important;   width: 100% !important;   margin-left: -10px !important;} }

3) I've injected the following CSS code into the form to affect only the desktop view:

.amin_n {   display: flex;}

HERE'S MY DEMO FORM:

https://form.jotform.com/Amin_N/3096890

Please check my demo form in REAL mobile and desktop. You don't have to re-implement the steps. Just clone my form and copy the source code of my paragraphs into your paragraphs.

Result on mobile:

Result on desktop:

Should you have any further inquiries, we will be more than happy to help.

What you've done looks GREAT! However, I'm unable to clone the form. I can view it on my phone and computer at the link provided, but when I try to clone it, I get the following error. Therefore, I'm unable to copy the code to my form by cloning yours to see the code.

You may try cloning this form:

https://form.jotform.com/211358005568960

Let us know how it goes.

Thanks.

Hmmm...when I cloned the form, it stacks the image on top of the bullet points when viewing on my computer. This is the cloned version of your last form.

https://form.jotform.com/211365985082158

Hi again,

I'm glad you like my form.

Your cloned version of my colleague's cloned version of my original form shows up as below on PC.

I don't see the issue mentioned in your last response as shown in my recording above.

On mobile also, all seems well as shown below in my recording.

We would be so much grateful if you could just further elaborate and provide more information, so that we can better assist you.

Ugh...my bad...it only appears that way in the editor, but when I go to the actual form, it's perfect. On my phone, it originally had the photo above the bullet points, but over to the right. I was able to fix it by deleting style="width: 580px;"> from the div class info. This issue is resolved. Thank you so much for your help!

This ticket can be closed. Thank you so much for your help!