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 can I make my custom hover texts responsive?

    Asked by MartinCo on March 21, 2017 at 10:31 AM

    Hi, I just followed this code in Investment profile section of https://form.jotform.me/70745086704459 

    Can you please tell me how to make this content responsive so It's viewed on mobile screens.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Jim_R on March 21, 2017 at 11:06 AM

    I'm seeing you declared an 800px width to all the custom hover texts you added via CSS.

    To make this responsive, you need to have 2 sets of the entire CSS Codes given by my colleague on the previous thread

    1. For desktop

    2. For mobile, using the @media query you already have on your CSS section

    So, just copy the entire code block for the custom hover text > change all the width values from 800px to auto > then enclose the entire chunk within your @media query.

    Place it within this:

    @media only screen and (max-width:

    480px) and (max-width : 1024px) {

        /* The entire css chunk with the widths set to auto this time */

    }

    IMHO, it still won't look good on mobile due to the length of your description. As a user, I honestly think the hover texts won't be needed but if you think otherwise, another nifty way of adding more info to your form is by using the Text (HTML) Field, then use Conditions to conditionally show a description based on what was selected on the Single Choice Option (Radio Button).

    Related guides:

    Smart-Forms-Using-Conditional-Logic 

    How-to-Show-or-Hide-Fields-Base-on-User-s-Answer 

  • Profile Image

    Answered by MartinCo on March 23, 2017 at 06:26 AM

    Hi, I set width to auto but it's not working fine, it's colliding with next text block. 

    Yes the second option is more appropriate.

     

    Thanks for the remarks.