Product category blocking form field on phone view

  • mveeken4
    Asked on November 25, 2020 at 3:31 PM

    When I load the form as a popup on my phone, the 'Category' banner blocks the field above1606337016 5fbec1f845636 Screenshot 2020 Screenshot 10

  • jonathan
    Replied on November 25, 2020 at 7:19 PM

    We apologize for inconvenience. I was able to reproduced the issue also when I checked using mobile browser.

    1606349905 5fbef4517748e zzz 2020 11 26 Screenshot 10

    Please allow me some more time to check further and identify the fix. I will update this ticket after some time.

  • jonathan
    Replied on November 25, 2020 at 7:59 PM

    I fixed it on your form by injecting the following custom CSS codes.

    #id_18{
      height: 240px !important;
    }    
        
    @media screen and (max-width:480px){

    #id_18{
      height: 280px !important;
    }
    }


    1606352283 5fbefd9b0e9e8 zzz 2020 11 26 Screenshot 10


    Please test/check also on your side. Do let us know if it still did not work.


  • mveeken4
    Replied on December 17, 2020 at 8:58 PM

    I have another form where, when on my phone, the 'Category' banner blocks the field above again. Will the same CSS work on that form? Sorry, I'm not real good with CSS. Not sure where to put the custom CSS.



    1608256647 5fdc0c87f339c IMG 20201217 17 Screenshot 10

  • Vanessa_T
    Replied on December 17, 2020 at 11:32 PM

    I assume you are now referring to this form, https://www.jotform.com/form/203308904978262.

    If yes, please add the CSS below into your form:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
    .filter-container { top: -25px !important; }
    }

    Guide: How-to-Inject-Custom-CSS-Codes

  • Michaela
    Replied on December 18, 2020 at 12:11 AM

    Thank you for your quick response. That worked. It all looks good now.😊👍