-
mcota4421Asked on October 1, 2016 at 9:08 PM
-
liyamReplied on October 2, 2016 at 3:57 AM
Hello,
There is no need to add a code to make your form mobile responsive. With just a few clicks, you can find the option to make your form mobile responsive. This guide will walk you through: https://www.jotform.com/help/311-How-to-make-forms-mobile-responsive
Another method is simply just add a mobile responsive widget on your form. You can find the widget here: https://widgets.jotform.com/widget/mobile_responsive
If you have questions, please let us know.
Thanks.
-
ozlem.demirci1993Replied on October 2, 2016 at 9:52 AM
Hi mcota4421,
Jotform is already mobile responsive as mentioned above, but if you want to write your own CSS codes to your form to make it mobile responsive, you can do it by using Advanced CSS Editor panel.
If you want something else, or need further assistance, feel free to revert back.
Thank you.
-
mcota4421Replied on October 3, 2016 at 1:45 AMIt actually kind of isn't responsive. And the widget doesn't work well.
Please provide the custom CSS for the form in question so I can copy and past it. Thanks.
Deep Dive Ref Admin Crew
Info@deepdiveref.com
www.deepdiveref.com
"We WILL make you better"
Sent from Mobile Outlook
... -
Ashwin JotForm SupportReplied on October 3, 2016 at 3:37 AM
Hello,
I have made few changes in your form. Can you please take a look and see if it is displaying correctly in mobile devices?
I have injected the following custom css code in your form:
@media only screen and (min-device-width : 414px) and (max-device-width : 736px){
.form-submit-print {
margin-left : 6px !important;
}
}
@media screen and (min-width: 10px) and (max-width: 480px){
img.header-logo-left {
width : 280px !important;
}
.header-logo-left {
width : 280px !important;
}}
We will wait for your response.
Thank you!
-
mcota4421Replied on October 3, 2016 at 10:45 AMGood morning! What form was changed? It was supposed to be the
RMAC Coaches Officials Game Report
Please update me. Thanks!
Administrative Staff
Deep Dive Ref, LLC
| info@deepdiveref.com | www.deepdiveref.com
... -
Ashwin JotForm SupportReplied on October 3, 2016 at 12:11 PM
Hello,
I have injected the following custom css code in your form "RMAC COACHES Officials Game Report" and your form seems to display correctly in mobile devices:
@media screen and (min-width: 10px) and (max-width: 480px){
#cid_4 .form-image {
width : 280px !important;
}
#first_5 {
width : 170px !important;
}
#last_5 {
width : 170px !important;
}
.form-line-column {
white-space: normal !important;
}
}
I would suggest you to please test your form and get back to us if you have any issues.
Thank you!
-
mcota4421Replied on October 6, 2016 at 10:45 AMGood morning!
I received this from another jotform client. Is this a template? If
so, which one is it? This is exactly what I need! And how is that
payment set up? Not pal correct?
His:
https://form.jotform.com/62743801674156
My current store template: (I need people to select qty of size just
like this one)
https://form.jotform.com/62604171377152
Can you help me change mine to the the one above although it is live and
active?
Administrative Staff
Deep Dive Ref, LLC
| info@deepdiveref.com | www.deepdiveref.com
... -
Ashwin JotForm SupportReplied on October 6, 2016 at 12:54 PM
Hello mcota4421,
If I understand your requirement correctly, you want to display product quantity & size next to each other instead of one below the other. Is that correct?
Please inject the following custom css code in your form and that should display the product options next to each other:
span.form-product-item.hover-product-item {
width: 550px;
}
The output of the above custom css code:
Thank you!
-
mcota4421Replied on October 6, 2016 at 3:45 PMI need to display side by side but sizes and qty under same dropdown arrow as jos example.
Deep Dive Ref Admin Crew
Info@deepdiveref.com
www.deepdiveref.com
"We WILL make you better"
Sent from Mobile Outlook
... -
mcota4421Replied on October 6, 2016 at 5:44 PMI also need to know what payment service he used so I can
consider.....thanks!
Administrative Staff
Deep Dive Ref, LLC
| info@deepdiveref.com | www.deepdiveref.com
... -
liyamReplied on October 6, 2016 at 9:55 PM
Hello mcota4421,
As mentioned by Ashwin, the code you need to insert in order to show the dropdown side by side is this:
span.form-product-item.hover-product-item {
width: 550px;
}Regarding the payment gateway service used, he used Stripe.
If you need assistance in inserting the CSS code, please let us know.
Thanks.
-
mcota4421Replied on October 7, 2016 at 6:45 PMThis is what I need: (I need to have qty add up at the end)
Administrative Staff
Deep Dive Ref, LLC
| info@deepdiveref.com | www.deepdiveref.com
... -
jonathanReplied on October 7, 2016 at 9:42 PM
Just to be clear, this is the form https://www.jotform.us/form/62798779633175 being worked on. Let us know if not.
Base on what I understand after back reading on the discussion thread, I can assume the original question about the CSS code needed for the form was already resolved. Let us know if this is not the case.
If you have new question not related to this thread, you can create a new topic for it using the link below https://www.jotform.com/contact/
Best
-
mcota4421Replied on October 9, 2016 at 2:44 PMyes I need them to be able to choose size qty and total of item on side
like the screenshot I sent
Administrative Staff
Deep Dive Ref, LLC
| info@deepdiveref.com | www.deepdiveref.com
... -
JanReplied on October 9, 2016 at 4:51 PM
Currently, this is how your form looks like in mobile device:
If I understand you correctly, you would like the "Quantity" and the "Size" in 1 row below the product name in mobile device. If yes, then please insert this CSS 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) {
.form-sub-label-container {
width: 60px;
}}
Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:
Hope that helps. Thank you.
-
mcota4421Replied on October 9, 2016 at 8:44 PMOk.We need each size to have its own dropdown as illustrated in previous picture with red mark ups
Need total qty for each item as noted once the patron is done selecting. Just like picture I sent you guys.
Does that make sense??
I.e. XS through XXL
XS. S1. 12. 23. 34. 45. 56. 6
Deep Dive Ref Admin Crew
Info@deepdiveref.com
www.deepdiveref.com
"We WILL make you better"
Sent from Mobile Outlook
_____________________________
... -
liyamReplied on October 9, 2016 at 10:10 PM
Hello,
As your question no longer refers to a CSS matter and more of something related to the set-up of your products, I have moved the last question to a new thread. We'll give you a response on the said thread in a while.
Thanks.