-
I created a popup form using the article you recommended from the forum: https://theadminbar.com/css-only-modal-with-generateblocks/.
The form was built using GoHighLevel, and the popup works well. I embedded the GoHighLevel form on the homepage, but after setting up the popup, the general form display broke. You can refer to the issue here: https://prnt.sc/-wrjt67vLcr4.
Also, on mobile devices, the popup form can be dragged around, and I want it to remain fixed, fully responsive, and display as a full single-page view for visitors. Here’s a screenshot of the mobile issue: https://prnt.sc/8ivfumfK4bcY. I’ve also added additional CSS — please take a look at that as well.
Kindly guide me on how to fix this.
-
Hi there,
I can’t replicate the issue you mentioned. The form layout looks correct on desktop view, and I tested it on mobile devices as well—it’s not draggable on my end.
It could be the browser cache problem. Try clearing the cache and see if the issue persists.
-
No, I already checked by clearing the cache. Now, you can see that the container is missing when I checked in incognito mode: https://prnt.sc/tZF7KE9EFivh, https://prnt.sc/39ma83RafziX
Mobile view: https://prnt.sc/Jp00jtbJi0Jn, https://prnt.sc/1YO-r4NZV6UN
Also, you’re checking the wrong form. I think this is happening because I pasted the same embed code in both places.
-
The problem is caused by you setting all containers of that section to
height:700px, while the iframe (form) is set toheight:100%by it inline CSS, which means it will occupy the entire height of the container, so the rest of the content will be overflowing out of the container.Can you remove all these static
heightvalues? And add this CSS to alter the iframe’s height?iframe#inline-WNKuf04mkCr2xpuapW89 { min-height: 700px; height: auto !important; } -
That worked, thank you.
However, I’m still having an issue with mobile view. Let me explain in detail. First, I want the popup form to be fully responsive on a single page, similar to this form: https://prnt.sc/VgM2XjVgL5He
Here’s the view of the popup:
– Android view, https://prnt.sc/1YO-r4NZV6UN
– iOS view, https://prnt.sc/1fxiK-cmnZA1 -
For the container with class
modal-backdropand container with classmodal-content, you need to reduce their paddings on mobile.Currently both of them have 2em padding around.
-
No, I haven’t added padding for either container.
https://prnt.sc/fIDDy-4q7EKS
https://prnt.sc/StO_ADRtz7dvCan you please help me fix this immediately? It has already been two days since I created this ticket.
-
Try adding this CSS:
.gb-container.modal-content { padding: unset; } .gb-container.modal-backdrop { padding: 1em; } -
That worked, thank you.
-
You’re welcome
-
Yes, but now I have another issue with the footer on the same site. It appeared after adding some CSS code, but I am not exactly sure which part caused it. I am confident it is CSS-related because I have migration documentation from a similar site where the footer looks fine.
The issue with this site’s footer is that it is not displaying fully. There is a large white space. You can check it using this URL: https://prnt.sc/ncgTGR51L3k0
-
There is an empty paragraph which caused the spacing issue:
https://app.screencast.com/5iI2bOfSJHEpjRemoving it should fix the problem.
-
No, there is no empty paragraph here. Refer the URL, https://prnt.sc/MaRhMd66GkMa.
-
There is an empty paragraph there, but it might not be in the exact spot you’re checking.
However, if you want a quick fix, you can use this CSS:
p:empty { margin-bottom: 0; } -
Thanks
-
Also, my popup form still has an issue — it’s not responsive across all device sizes. You can check the form using this tool: https://responsivetesttool.com/. I want the form to be as responsive as Website 2, which I previously shared.
Additionally, visitors should be able to close the form by clicking outside of it, not just by using the “X” icon.
- You must be logged in to reply to this topic.