Add CSS code to form to make it mobile responsive

Can I get the custom css for mobile view re RMAC COACHES
Officials Game Report.
thanks!
Administrative Staff
Deep Dive Ref, LLC
| info@deepdiveref.com | www.deepdiveref.com

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.

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.

 

It 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
...

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!

Good 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
...

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!

Good 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
...

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!

I 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
...

I 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
...

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.

This 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
...

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

yes 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
...

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.

Ok.
Deep Dive Ref Admin Crew
Info@deepdiveref.com
www.deepdiveref.com
"We WILL make you better"
Sent from Mobile Outlook
_____________________________
...

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.