Pop up form won't minimise on mobile

[Lauren3]

Hi,

I have tried to create a pop-up CTA which is working fine on desktop but it won't close on mobile.

Has anyone had this problem before and if so, how did you resolve it?

Thanks!

[Ben_M]

Best thing you can do is share a link to your page. The intended action is that it should close but you could have errors on your page preventing the popup from working properly.

[Lauren3]

Hi Ben, thanks for your reply. I've been testing it on our staging server which requires a password so I can't share that publicly. I wondered if it could be a staging server issue, but it works fine on desktop!

[Ben_M]

If the staging is different than your production, for instance if you are running other tests, then it could be. If you open up your browser console when you are in the staging environment, are any errors being returned? If so, what?

[Lauren3]

Hi Ben, I just tested with a random page on our website that doesn't get much traffic - and that was the same. There's no errors, it just won't recognise that I've clicked the X on the corner of the pop-up.

[TomM2]

Hey @Lauren3 my guess is there's either JS conflicts causing these issues or, more than likely you have some styling issues that is causing something to appear over the x button, rendering it unclickable on mobile. 

It's impossible to tell without seeing the issue really, but if there's any live examples you could share of this I'd be happy to take a look.

One easy way to determine if this is a conflict on the site is to just post the CTA somewhere else and see if the issue persists. if you post it into codepen or some other code hosting site then test on mobile and don't see the issue it at least excludes it being a HubSpot issue. 

[Lauren3]

Hi @TomM2 ,

I've put the pop-up live on a hidden page on our website, hopefully this won't disrupt too many users for today:

https://www.aura.life/articles/the-ignorance-surounding-death

If you could take a look I'd be really grateful!

Thank you,

Lauren 

[Ben_M · Accepted solution]

@Lauren3  - Have you raised this as a ticket with Hubspot? If not I definitely would. As someone who has been in web development for many years this is a messy setup. Long story is that the cta is in an iframe in a modal and the "X" is absolutely positioned. I tested in a local chrome mobile test and an iphone 12 and the results were sporadic as to whether or not the "X" would work. In some cases I would have to zoom or scroll to get the "X" to close the window.

I'm not seeing any additional code on your page that would conflict, and the console errors are not related to the cta from what I could see. 

You could try overriding the positioning in their button-container class, to change it to relative positioning or alter the z-index from the default value of 1, but I would see what Hubspot recommends since there are no errors present and this feels to be more of an issue with their code.

[Lauren3]

@Ben_M thanks so much for taking the time to look into this!