I’m working on a page with four images, each linked to a modal. The modal is just the same image but larger. The first modal tends to work fine, but the other ones get completely wacky when they’re activated. Images show up in seemingly random places. Everything has exactly the same settings, so for the life of me I cannot figure out why this is happening. Everything works fine in preview and then breaks on the published site. Thanks in advance for your help.
I’m not able to see the issue your describing on my end—each modal opens up the larger image at the top as expected.
One thing I do notice is that one the staging link you provided (Copyright Agency) loads with the second image is open by default. It’s possible that scrolling here—before closing and reopening the modal—could be causing the problem you’re experiencing.
What environment (browser/OS/version) are you using? Are you able to record a quick video showcasing your experience? That may help shed some light on how we can recommend fixing it!
Thanks @mikeyevin, the second image open by default is another thing I’m struggling with. It’s definitely set to “hide” and the trigger is set up exactly the same ways as the others, which are working fine.
I don’t think I can attach a .mov here but I’ve uploaded the video here to show the problem.
Thanks so much for the extra info! That’s definitely strange behavior and it looks like I get the same behavior on my end when clicking that specific modal link—none of the others have that problem.
I took a peek at the styles you have applied to that specific modal and the only difference I can see is the flex sizing—all of the other popups are using the first option (shrink if needed).:
I’d recommend updating that style and see if that fixes things on the published site or even recreating that modal section by duplicating one of the working modal sections that already exist with updated classes.
In terms of the modal open by default when loading that page, you should be able to create an initial state on that modal section that hides it by default:
Thank you for your detailed response! I really appreciate it. I eventually experimented with using containers as the modals instead of sections, which seems to have resolved all the problems. Things get wacky unless I’m very specific about defining max width, but other than that, everything seems to be working!
That makes sense that using another element type would fix some quirks—section elements are just div elements with some “under-the-hood” styles that get applied (using another element would have been my next suggestion).
