Enlarged Images not visible in Squarespace?

Hi,

I've added my form to my Squarespace website. When I click on a thumbnail in the form, the enlarged image pops up but is halfway down the page (since my form is long). Thus, it isn't visible to the user. How can I fix this so that it is aligned to the top and the user instantly sees it after clicking?

Would you mind letting us know the website URL so that we can investigate the problem in your Squarespace form further?

We are looking forward to your response.

Thanks.

https://www.inasoul.com.au/order-now-final

Hi, 

Thank you for providing the URL, I can see that the product image is on the middle of the page when clicked, it could be the height of the image container on the iFrame codes that are causing the issue.

Please try to re-embed the form using the Embed codes: Embedding-a-Form-to-a-Web-Page

Then let us know how it goes.

Thanks Kris!

I embedded the source code which has fixed the image issue. But now some of the text seems to be cut off. How can I adjust the height so the text doesn't get cut off?

Could you please embed the form with the iFrame code once again so that we can check the issue.

Guide: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

The Script code has some conflicts and is not updating the CSS which I have embedded.

or you can try to inject the following CSS and then re-embed the Script code to see if it is getting reflected:

.form-product-item {
    padding-bottom: 15px!important;
}

To inject custom CSS please follow this guide:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Thanks.

Hi,

I tried the custom CSS as suggested but unfortunately, it didn't work.

So, I just reverted back to embedding the source code as previously mentioned (which has the text cut off issue). If you could help me with the text issue, that would be great.

 

Could you please embed the form with the iFrame code once again so that we can check the issue.

Guide: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

The Script code is not updating the CSS on your website. The Script code induced some conflicts between your form and the website.

We are looking forward to your response.

Thanks.

Hi Roneet,

I've embedded the iFrame code again. Please let me know how you go.

https://www.inasoul.com.au/order-now-final

Thanks for switching to the iFrame code. I have injected the following code which has fixed the issue:

@media screen and (max-width: 1024px),
screen and (max-height: 640px) {
 .overlay .overlay-content {
  height: 15%;
  width: 75%;
  top: 501px;
 bottom: -150px;
 }

}

I hope this helps!

Thanks

Great, it works! Thanks a lot.

Just a few other things.

1. How can I centre the form? Right now it's aligned to the left on my website.

2. How can I remove the blue border around the form?

3. Is it possible to reduce the padding around the "I agree..."?

Thanks again.

I have injected the following CSS in your Form for all your 3 concerns:

.supernova .form-all, .form-all {
      border: 0px solid transparent;
    }
   
    #id_20 {
 margin-top: 0px;
 margin-bottom: 0px;
 padding-bottom: 0px;
 padding-top: 0px;
}

#id_33 {
 padding-bottom: 0px;
 margin-bottom: 0px;
}

.form-section {
 position: relative;
 left: 120px;
}

Let us know how it goes.

Thanks.

Everything works. Thanks once again.