Hide element on desktop, show on mobile

  • Profile Image
    poopselfie
    Asked on February 21, 2014 at 01:45 PM

    Hi, I am trying to add a heading that will only be visibile when a user is on a mobile device. Could this be done using simple CSS display:none; in mobile css? I am essentially redirecting mobile users to the Form URL in the preview tab. is there a way to customize that preview further?

     

    I would like it hidden on desktop, but visible on mobile.

  • Profile Image
    TitusN
    Answered on February 21, 2014 at 03:04 PM

    Hello,

    Yes, you can do this using a viewport.

    First, set the heading to be hidden by default:

    #element_id {display:none}

    Then add a viewport - for example:

    @media screen and (max-width: 400px) {
      #element_id { display:inline; }
    }

    You would have to inject your form with this custom CSS

    Does this help? Do you have a form and Title in mind so that we can assist?

    Please let us know.

  • Profile Image
    poopselfie
    Answered on February 21, 2014 at 06:54 PM

    Yes this helps very much, thank you. Is there a way i can find the element ID of an image field?

     

    eg: use the image field as a heading for the mobile form and hide it on a desktop form.

  • Profile Image
    TitusN
    Answered on February 21, 2014 at 06:58 PM

    Use this linked guide.

    If you hit a bump, share the form URL and we can identify the field id/class for you.

    Thanks.

  • Profile Image
    poopselfie
    Answered on February 21, 2014 at 07:15 PM

    Submitted a private query with the form URL.