Header/logo mobile responsivenes issues. I tried a few of the different CSS suggestions on Jotform-Answers, but none seemed to fix the width scaling i

  • Profile Image
    Goldstein_Jeremy
    Asked on December 30, 2020 at 10:04 AM
  • Profile Image
    Goldstein_Jeremy
    Answered on December 30, 2020 at 10:06 AM

    Oops... I wrote the body in the title.


    Basically, the logo is stretching width in mobile portrait mode. i tried a few of the css code fixes on jot-form answers to no avail.

    1609340801_5fec978177ecc_FireShot Captur

    1609340762_5fec975a60a81_FireShot Captur


    any tips?


    thanks in advance!

  • Profile Image
    Jovanne_A
    Answered on December 30, 2020 at 10:44 AM

    Hi, thank you for contacting Jotform support.

    Please try adding this custom CSS code:

    @media only screen and (max-width: 480px) {
    img.formLogoImg {
      width: 100% !important;
      height: auto;
    margin-bottom: -100px;
    }
    }


    Guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    Here is a sample output:

    1609343042_5feca0422fb6e_4.png

    Please give it a try and let us know if this worked for you.

  • Profile Image
    Goldstein_Jeremy
    Answered on December 30, 2020 at 11:10 AM

    Score. Thanks Jovanne!

    In case others come around with the same Q... I see your code above is similar to others ive seen on here and tried, but not the exact same. The issue is in the logo height from the original PNG? How can this post help others in the future figure out the +/- px settings for the CSS?

  • Profile Image
    Gaetan_B
    Answered on December 30, 2020 at 12:30 PM

    Hello,


    You pointed it out nicely: your code above is similar to others ive seen on here and tried, but not the exact same.

    The base will be similar, but depending on the image size and other elements, we have to make slight adjustments every time as it is almost always unique.

    At the end of the day, it just comes down to trial and error and to see what fits best. The only difference is that we do this all day long.


    I would recommend doing it exactly like you, to simply try it out and to reach out for help if it's not working.


    Gaetan

  • Profile Image
    Goldstein_Jeremy
    Answered on December 30, 2020 at 01:52 PM

    rockstar, thanks y'all! works perfectly.