What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How To Style Field Borders On Mobile Devices

    Asked by markashton 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

    style Mobile devices how
  • Profile Image

    Answered by Sammy 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

    Answered by markashton 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

    Answered by Ben on October 12, 2015 at 12:37 PM

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