Logo is stretched on iPhone and web browser

  • drmichelleconnell
    Asked on June 30, 2024 at 6:29 PM

    Hi there,


    When updating my jot form logo today, it stretched my image in viewing both on mobile and web browser. How do I fix that?


    Here is my link: https://form.jotform.com/233308255981157


    Thank you!!

  • Aries JotForm Support
    Replied on June 30, 2024 at 8:59 PM

    Hi Miki,

    Thank you for reaching out to Jotform Support. I cloned and tested your form to replicate the issue and it appears your form image logo is not stretching when viewing on an iPhone or web browser. See the screenshot below:

    Logo is stretched on iPhone and web browser Image 1 Screenshot 30Logo is stretched on iPhone and web browser Image 2 Screenshot 41

    Can you please confirm if you embedded your form to a website? If so, could you please share with us the website URL? And if you can share with us the screenshot where the issue is showing, that would help us to narrow down the issue and find a resolution to it. Here's a guide on how to post a screenshot to our support forum.

    After we hear back from you, we’ll have a better idea of what’s going on and how to help.

  • drmichelleconnell
    Replied on July 1, 2024 at 1:15 PM
    I don’t know what it means if “I embedded my form into a website?”
    This is the link I use: https://form.jotform.com/230005881574151
    And here is my screen shot with the stretched logo
    Dr. Michelle “Miki” Connell RPh 64785 (916) 233-5526
    DrMichelleConnell@gmail.com
    ...
  • Sidharth JotForm Support
    Replied on July 1, 2024 at 2:03 PM

    Hi Miki,

    You can customize the logo size with the help of CSS code. Let me show you how:

    1. In Form Builder, click on the Paint Roller icon at the top right corner.
    2. Click on the Styles tab.
    3. Scroll down to the Inject Custom CSS section, and paste the CSS code given below:
    .hasFormUserAvatar .form-cover-wrapper {
      margin-top: 5px !important;
      padding-top: 5px !important;
    }
    .form-cover-wrapper .form-page-cover-image {
      background-size: contain !important;
      width: 50% !important;
      height: 100% !important;
      background-position: center !important;
    }
    @media screen and (max-width: 480px){
     background-size: contain !important;
      width: 50% !important;
      height: 100% !important;
      background-position: center !important;
    }

    Logo is stretched on iPhone and web browser Image 1 Screenshot 40

    That's it. Check out the screenshot below to see the result:

    Web browser:

    Logo is stretched on iPhone and web browser Image 2 Screenshot 51

    iPhone:

    Logo is stretched on iPhone and web browser Image 3 Screenshot 62

    Give it a try and let us know how it goes.

 
Your Answer