Header images are shrinking on mobile version

  • gripelectric
    Asked on June 16, 2017 at 11:45 AM

    Help! Why do my images shrink on the mobile version of my form? Even when I add the CSS with a max-width property it doesn't help! What am I doing wrong?

     

    https://form.jotform.us/70566243988166

    desktop version:

    Header images are shrinking on mobile version Image 1 Screenshot 30

     

    mobile:

    Header images are shrinking on mobile version Image 2 Screenshot 41

    Jotform Thread 1175609 Screenshot
  • aubreybourke
    Replied on June 16, 2017 at 12:13 PM

    Have you tried adding the mobile responsive widget to your form? Just drag it onto the top of your form:

    Header images are shrinking on mobile version Image 1 Screenshot 20

  • gripelectric
    Replied on June 16, 2017 at 1:43 PM
    I did try this and it didn't change anything
    ...
  • aubreybourke
    Replied on June 16, 2017 at 2:13 PM

    Okay I can reproduce the problem here. It looks like your headings have pictures and empty headings. The empty headings is what is causing your images from not showing:

    Header images are shrinking on mobile version Image 1 Screenshot 30

    You can see it says "Type a header" and "Type a sub header". So what we need to do is click on each of them and insert a blank space character (spacebar).

    Then your images will display properly on mobile devices. Like this:

    Header images are shrinking on mobile version Image 2 Screenshot 41

  • gripelectric
    Replied on June 16, 2017 at 2:43 PM
    I fixed it with a "min-width" property in the css. Thanks though!
    ...