-
Bungalo805Asked on January 25, 2023 at 12:13 PM
when i turn my phone sideways the form runs off the screen. i have a code insert already for the vertical view, that works, now need this.
here is code already:
span[pid="1012"] .select_cont {
max-width : 160px !important;
display : inline-block;
}
here is form: https://www.jotform.com/build/230017236465147/publish
-
Amin JotForm SupportReplied on January 25, 2023 at 1:37 PM
Hello Bungalo805,
Thanks for reaching out to Jotform Support. Could you please allow me some time to closely look into this?
We appreciate your patience.
-
Amin JotForm SupportReplied on January 25, 2023 at 4:27 PM
Hello Bungalo805,
Thanks for holding tight. Please inject the following CSS code into your form:
.form-subproduct-option {
max-width: 160px !important;
}
Result:
Related guide: How-to-inject-custom-css-codes
Let us know if you need any other help.
-
Bungalo805Replied on January 26, 2023 at 1:47 PM
that code did not work. please advise.
-
Amin JotForm SupportReplied on January 26, 2023 at 3:35 PM
Hello Bungalo805,
Thanks for getting back to us. Please try decreasing the value in the code from 160px to 80px or lower. The code is correct, but you may need to decrease the value to fit small screens. So, please try with the following code instead:
.form-subproduct-option {
max-width: 80px !important;
}
Give it a try and let us know how it goes.
-
Bungalo805Replied on January 26, 2023 at 3:37 PM
perfect! thanks!!!
-
Bungalo805Replied on March 28, 2023 at 11:35 PMHi- help, I can’t get the formatting to fit on mobile & I can’t see the # in the drop down once selected.
Please advise!
[image0.png]
Cheers,
Erin Kanaley-Famularo
iPhone. iTypos. iApologize.
... -
Billy JotForm SupportReplied on March 29, 2023 at 2:39 AM
Hello Erin,
Thanks for getting back to us. Allow me some time to work on the CSS code. I'll reach out again as soon as I have an update.
We appreciate your patience and understanding.
-
Billy JotForm SupportReplied on March 29, 2023 at 2:51 AM
Thanks for patiently waiting. Please try the CSS code below:
@media only screen and (max-width: 480px) {
.select_cont {
display: inline-block !important;
width: 45px !important;
}
#input_3_1020_subproducts {
position: relative;
}
#input_3_1020_subproducts tbody {
position: absolute;
top: 10px;
left: -13px;
z-index: 999;
}
.payment_footer {
margin-top: 160px !important;
}
}
Result:
Here's a cloned version of your form for your reference.
-
Bungalo805Replied on March 29, 2023 at 1:50 PMBetter but the $ sign is still on different line.
[image0.png]
Cheers,
Erin Kanaley-Famularo
iPhone. iTypos. iApologize.
... -
Bungalo805Replied on March 29, 2023 at 6:35 PM
Any updates here? how can i get the $ and the # on the same line?
-
Sonnyfer JotForm SupportReplied on March 30, 2023 at 12:16 AM
Hi Erin,
I'm very sorry to hear that. Let me look into it and get back to you with a solution.
-
Sonnyfer JotForm SupportReplied on March 30, 2023 at 12:23 AM
Hi Erin,
Thanks for patiently waiting. You can inject the below CSS Codes into your form to have the # and the $ sign on the same line:
@media only screen and (max-width:480px) {
span.form-product-options-text.form-sub-label {
margin-top: -25px;
}
}
Here' what it should look like aftterward:
Let us know if you need any more help.
-
Bungalo805Replied on March 30, 2023 at 9:55 AMHi this does no resolve. The $ sign and # when viewing the price under options is still on two lines.
See here
[cid:image002.png@01D962D4.40CEBE20]
Cheers,
Erin
erin@bungalo805.com I 650-646-1275
Founder I Bungalo805.com I Santa Barbara
[Text Description automatically generated]
... -
Luna JotForm SupportReplied on March 30, 2023 at 10:35 AM
Hi Erin,
Thanks for reaching out to Jotform Support. You can use the CSS codes to align the $ sign and #. Let me show you how:
1. First, copy the code below:
@media (orientation: landscape) {
.form-sub-label {
position: absolute; top: 0;
}
}
2. Open your form in Form Builder, and click on the Paint Roller icon on the right side of the page to open Form Designer.
3. Under the Styles tab, scroll down and paste the code into the Inject CSS Code box and paste the code you copied.
4. Click on Save at the bottom of the Form Designer menu and you’re done.
Your product list will look like the screenshot below:
Give it a try and let us know how it goes.
-
Bungalo805Replied on March 30, 2023 at 10:40 AMHi this does not work. The mobile landscape still shows # and $ on different lines when selecting product options with different prices.
See here
[cid:image001.png@01D962DA.9E08A6E0]
Cheers,
Erin
erin@bungalo805.com I 650-646-1275
Founder I Bungalo805.com I Santa Barbara
[Text Description automatically generated]
... -
Nora JotForm SupportReplied on March 30, 2023 at 11:16 AM
Hi Erin,
I tried applying the CSS to my cloned form and the symbols are displayed on the same line as you requested. You can check out my result here:
I see that you haven't applied the CSS my colleagues provided for you. Can you please apply the CSS codes in the thread that I've combined below and try again? If they still don't look as you prefer after injecting the codes, please send us a screenshot of your screen so that we can check it out.
@media only screen and (max-width:480px) {
span.form-product-options-text.form-sub-label {
margin-top: -25px;
}
}
@media (orientation: landscape) {
.form-sub-label {
position: absolute; top: 0;
}
}
Give it a try and let us know how it goes.
-
Bungalo805Replied on March 30, 2023 at 12:25 PMThat is an old form, I don’t use. It is this form:
https://www.jotform.com/form/223435620217145
and it is on MOBILE.
Cheers,
Erin
erin@bungalo805.com I 650-646-1275
Founder I Bungalo805.com I Santa Barbara
[Text Description automatically generated]
... -
Ryan JotForm SupportReplied on March 30, 2023 at 2:59 PM
Hello Erin,
Thanks for getting back to us. It seems you are now referring to a different form. Can you tell us what is the exact issue on your new form so that we can provide you a solution?
Once we hear back from you, we'll be able to help you with this.