Modal pop-up on mobile not responsive; getting cut off

Design help General
1

Hello,

I have several modal pop-ups that appear via a button-click that work perfectly on desktop

Screenshot 2024-07-30 at 3.00.56 PM
Screenshot 2024-07-30 at 3.00.56 PM3454×2076 467 KB

Screenshot 2024-07-30 at 2.59.28 PM
Screenshot 2024-07-30 at 2.59.28 PM1920×1154 118 KB

However when I click to access them on my mobile device the modal container goes beyond the viewport, cutting off information and the ability to close out of the pop container.

Screenshot_20240730-145429
Screenshot_20240730-145429864×1920 142 KB

Screenshot_20240730-145202
Screenshot_20240730-145202864×1920 264 KB

Ideally I would like:

  1. the modal container to be fixed inside of the viewport
  2. have the body text container fit inside of the modal container and have a scroll function allowing users to scroll thru the rest of text

Is this possible? Or is there a better way to address this problem?

Here is my Read-Only link

Here is the Published Site as to view live on your mobile device

Any help is greatly appreciated!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

You’ll either need to reduce the amount of content, or reduce the font-size, or build scrolling into your modal content area.

This is one of the reasons I built SA5’s modals library, clients were always entering in too much content. Here that’s not an issue. It also sidesteps the interactions work and designer challenges by using GSAP.

image
image973×481 85.6 KB

Demo-

SA5 docs-