-
1mpactAsked on May 13, 2021 at 1:49 PM
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!
Page URL: https://form.jotform.com/211317142867050 -
Basil JotForm SupportReplied on May 13, 2021 at 4:25 PM
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.
-
1mpactReplied on May 13, 2021 at 8:44 PM
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!
-
Ashwin JotForm SupportReplied on May 14, 2021 at 4:02 AM
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.
-
1mpactReplied on May 14, 2021 at 1:13 PM
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.
-
VincentJayReplied on May 14, 2021 at 4:46 PM
First, try deleting the Table in the source code:
After that close the source code window and open it again to add these codes:
-
1mpactReplied on May 15, 2021 at 7:19 PM
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....
- Title
- price
- photo
- description
Stacked on top of each other.
-
roneetReplied on May 15, 2021 at 9:46 PM
Please allow me some time to take a look at it.
Thanks.
-
roneetReplied on May 15, 2021 at 10:12 PM
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.
-
1mpactReplied on May 15, 2021 at 10:18 PM
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.
-
roneetReplied on May 16, 2021 at 12:06 AM
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.
-
1mpactReplied on May 16, 2021 at 3:46 PM
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.
-
Amin_NReplied on May 16, 2021 at 7:25 PM
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.
-
1mpactReplied on May 16, 2021 at 8:50 PM
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.
-
roneetReplied on May 16, 2021 at 10:03 PM
You may try cloning this form:
https://form.jotform.com/211358005568960
Let us know how it goes.
Thanks.
-
1mpactReplied on May 17, 2021 at 2:56 PM
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.
-
Amin_NReplied on May 17, 2021 at 4:12 PM
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.
-
1mpactReplied on May 17, 2021 at 4:49 PM
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!
-
1mpactReplied on May 25, 2021 at 8:05 PM
This ticket can be closed. Thank you so much for your help!