-
drmichelleconnellAsked 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!!
Page URL: https://form.jotform.com/233308255981157 -
Aries JotForm SupportReplied 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:
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.
-
drmichelleconnellReplied on July 1, 2024 at 1:15 PMI 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 SupportReplied 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:
- In Form Builder, click on the Paint Roller icon at the top right corner.
- Click on the Styles tab.
- 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;
}
That's it. Check out the screenshot below to see the result:
Web browser:
iPhone:
Give it a try and let us know how it goes.