How can I make my custom hover texts responsive?

  • Profile Image
    MartinCo
    Asked 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
    Jim_R
    Answered 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
    MartinCo
    Answered 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.