CSS: Formatting running off the screen in mobile landscape.

  • Bungalo805
    Asked 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/publishCSS: Formatting running off the screen in mobile landscape Screenshot 20

  • Amin JotForm Support
    Replied 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 Support
    Replied 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:

    1674681952 63d19e60c5729  Screenshot 10

    Related guide: How-to-inject-custom-css-codes

    Let us know if you need any other help.

  • Bungalo805
    Replied on January 26, 2023 at 1:47 PM

    that code did not work. please advise.

    1674758865 63d2cad15d56f  Screenshot 10

  • Amin JotForm Support
    Replied 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.

  • Bungalo805
    Replied on January 26, 2023 at 3:37 PM

    perfect! thanks!!!

  • Bungalo805
    Replied on March 28, 2023 at 11:35 PM
    Hi- 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 Support
    Replied 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 Support
    Replied 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:

    1680072651 6423dfcbd42d6  Screenshot 10

    1680072663 6423dfd799ea1  Screenshot 21

    Here's a cloned version of your form for your reference.

  • Bungalo805
    Replied on March 29, 2023 at 1:50 PM
    Better but the $ sign is still on different line.
    [image0.png]
    Cheers,
    Erin Kanaley-Famularo
    iPhone. iTypos. iApologize.
    ...
  • Bungalo805
    Replied on March 29, 2023 at 6:35 PM

    Any updates here? how can i get the $ and the # on the same line?

  • Sonnyfer JotForm Support
    Replied 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 Support
    Replied 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;
    }
    }

    1680150131 64250e738ca4e  Screenshot 10

    Here' what it should look like aftterward:

    1680150200 64250eb8e01a3  Screenshot 21

    Let us know if you need any more help.

  • Bungalo805
    Replied on March 30, 2023 at 9:55 AM
    Hi 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 Support
    Replied 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.

    1680186921 64259e2988c44  Screenshot 10

    Your product list will look like the screenshot below:

    1680186909 64259e1da8371  Screenshot 21

    Give it a try and let us know how it goes.

  • Bungalo805
    Replied on March 30, 2023 at 10:40 AM
    Hi 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 Support
    Replied 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:

    1680189205 6425a7153fa9e  Screenshot 10 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;    top0
    }
    }

    Give it a try and let us know how it goes.

  • Bungalo805
    Replied on March 30, 2023 at 12:25 PM
    That 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 Support
    Replied 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.