How To Style Field Borders On Mobile Devices

  • Profile Image
    markashton
    Asked on October 11, 2015 at 10:59 PM

    Hi,

    This form: https://form.jotform.com/52812559863970

    On desktop the field borders have crisp edges ... what I want ;-)

    On mobile has soft rounded edges ... as per below....  I would like to make the borders sharper.

    Have tested on mobile browsers Sfari & Chrome

    Can you advise me how to target the borders of fields on mobile devices via CSS.

    (I note the crispness is kept on a desktop even if change the browser size to that of mobile dimensions)

     

     

    Thanks Mark

  • Profile Image
    Sammy
    Answered on October 12, 2015 at 07:59 AM

    Hi Mark,

    You can target the borders in mobile devices using the following CSS snippet, this will kick in if the screen width is less or equal to 550px

    @media only screen and (max-device-width: 550px){
        .form-textbox, .form-textarea, .form-dropdown, .form-list{
        -webkit-border-radius: 0px;
        -moz-border-radius:0px;
        border-radius:0px;
        }
    }

    Here is screenshot of the view in a mobile device

  • Profile Image
    markashton
    Answered on October 12, 2015 at 10:18 AM

    Sammy,

    Great stuff. Actually didn't use the nedia query ... just applied it globally.

    Many Thanks

    Regards Mark

  • Profile Image
    Ben
    Answered on October 12, 2015 at 12:37 PM

    In my colleague's name you are welcome Mark :)