Heading with Image isn't mobile responsive

  • Profile Image
    Gritzke
    Asked on July 06, 2018 at 06:20 AM

    Hi! First of all: I can't send a Review for this widget. I don't know why. Neither working with Firefox nor with Internet Explorer. Even though I'm logged in, my Name appears as "Guest" while trying to write a Review.

    So I'm using this forum to Report my problem wizh the mobile responsive widget:

    I's working fine so far. But then I wanted to make a form with a big header instead of a standard-sized one, I noticed that big headers are not being adjusted to fit a vertical mobile screen. So I had to pick standard size for the header again. It would be nice if that were working better.

    Screenshot
  • Profile Image
    DonaldHag
    Answered on July 06, 2018 at 08:35 AM

    You are unable to comment on the mobile responsive widget because it is deprecated. All Jotform forms are now responsive by default so there's no need to add a responsive widget. 

    If you have it on your forms, go ahead and remove it and the form will still remain responsive on all devices.

    To change the header size, click the gear icon and select the size from header properties.

    1530880483header size.png

    For further assistance, do let us know.

  • Profile Image
    Gritzke
    Answered on July 11, 2018 at 02:41 AM

    Thanks!

    Well I have already changed the Heading Size to large. The problem is, if I do pick "large", the responsive design will not adjust it in a way that makes it fit a mobile screen. Instead, it will look like in the screenshot that I posted. It shows you what a large header currently looks like on a mobile screen. And as you can see, it is not being displayed properly.

    I'm trying to give you a hint that there is an issue to fix with the responsive design. It is currently not adjusting all forms to fit a mobile screen because it is not adjusting large headers.

    My question is: Can that be fixed? Because I'd like to use large headers.

  • Profile Image
    EltonCris
    Answered on July 11, 2018 at 04:07 AM

    It can be fixed by injecting custom CSS codes to your form. http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    You can use the following CSS codes.

    @media screen and (max-width:480px){

        .form-header-group.hasImage>.header-logo {

        display: block;

        text-align: center;

        max-width: 80px;

        margin: 0 auto;

    }

    .form-header-group.hasImage>.header-text {

        width: 100%;

        font-size: 12px;

        text-align: center;

    }

    .form-all{

        width:100% !important;

        border:none !important;

    }

    }

    Result:

    I have also escalated this to our developers so they can implement a permanent fix.

  • Profile Image
    Gritzke
    Answered on July 11, 2018 at 04:12 AM

    Perfect! Thanks!

  • Profile Image
    giray
    Answered on August 06, 2018 at 04:10 AM

    Hi Gritzke!

    We implemented a permanent fix for the large headers. You will't need to inject custom css codes for your next forms.

    Regards!

     

     
  • Profile Image
    Gritzke
    Answered on August 08, 2018 at 02:10 AM

    Thanks!