Finsweet Modal pop-up query

Hi everyone,

I’m finishing a website for a client and I’m currently struggling to understand one of the behaviours. At desktop breakpoints, once clicked on the photo of the team member of the practice, we get a pop up and darker background to the whole page. However, on the tablet and mobile, that background doesn’t stretch to the top of the menu for some reason… Is there anyone that could advise on why this behaviour is happening?

Here’s the link to the read-only website: Website Read-Only

Thank you and all the best,
Adam

Do you have a staging link? I think the behavior can only be witnessed on the published site, not in Preview in the Designer.

Edit: sorry, my bad. It IS working in Preview mode. Gimme a sec.

I’d start by creating a clean page structure and removing the CMS binding until you have it working with just a static modal across all breakpoints.

Then, once this is working, move the part and inside a CMS collection.

hi Marc, thanks a lot for a prompt reply! Why do you think it’s better to remove the CMS binding to begin with?

I will take upon your advice and look into making the modal working without CMS first. At the beginning, I thought it was something to do with z-index settings- but that would affect all breakpoints, not just tablet/mobile.

@hello26 It’s just a common approach to strip away anything unnecessary, when debugging, to ensure the thing is working in its basic form (but in your environment). By doing so, you won’t have to deal with multiple potential issues.

After you ensure that the modal is working after you took/pasted it from the Library (on all breakpoints) start adding your modifications step-by-step and always test in between to ensure it still works.

By doing so, you can find the potential step/part that might be causing the problem. Good luck!