Pop-up content not scrollable on mobile devices

Design help General
1

I have a Team page and when you click on a member it opens a pop-up to reveal more information about that person.

Desktop is fine but I’ve noticed on mobile devices that you cannot scroll this pop-up if its content exceeds the viewport.

Any ideas how I can overcome this please? I have provided the shared link below. Please navigate to ‘Meet the Pugs’ and click on a team member for the pop-up. http://wearepug.webflow.io/our-team Obviously on mobile devices is where the problem occurs.

Thanks
Benji

Here is my public share link: https://preview.webflow.com/preview/wearepug?preview=ab4304a6f55e7949943fcb6cb10f4c19
(how to access public share link)

2

Any help with this topic too please would be greatly appreciated.

Thanks,
Benji

3

Hey Benjamin, the share link is currently not working.

1 Like
4

Here is the share link again:

https://preview.webflow.com/preview/wearepug?preview=a44ba140ea3772c3b3d8877adfcea26a

This is the page in question: http://www.wearepug.com/our-team

Click on the ‘+’ to display each pop up, on mobile none of this content is scrollable but the background is. Don’t understand why.

Thanks for your help.

Benji

5

Hey, looks like you have the team pop-up wrapper position set to “fixed” . Try Auto on you mobile queries. May need other adjustments too but I can’t test on a mobile device since I’m in read-only mode.

Edit: sorry set to “absolute” on mobile queries.

Cool site!

6

Thanks, this has helped. However, the Team Popup Container is fixed to the desktop size (910px) and I can’t change the width of it as ‘Webflow automatically handles the container width to make it fit on different devices’. So why is it not fitting for mobile then?

Any guidance you can give for this would be greatly appreciated.

Thanks,
Benji

7

Maybe change that to a regular div. and give it the same styles as the container.

I can see your change while I’m in Designer Preview but not on my phone. Do you mind publishing this latest change so that I can see it live?

8

Published. But only the third guy is clickable right now.

9

For whatever reason, I don’t see your latest push. Even when I clear my cache.

Also, I’m unable to see the actual pop up wrapper in preview mode. Even when I set to “block” and turn the opacity up to 100%. Strange.

I was able to change that width from 910 to Auto and added margin on either side to achieve a similar look. You just need to drop a regular div (not a container) into the Team Popup Wrapper and apply the “Team Pop-up Container” style to it. The drag your Link Block and “Team Row” into this new Div version and delete the old one. From here you’ll be able to change that width setting. Right now it’s caught up in a combined style loop where you have to move between the higher selector and children. One change ends up negating the other.

There are a lot of other custom settings happing with fixed pixel heights (causing reflow/overflow issues). For good responsive action, this height should be Auto. Same with your Team Rows. These fixed heights are causing the text to flow outside of the container in some views.

I’d also try using different position settings for parents and children. Absolute vs fixed on your wrappers.

Sorry, wish I could dig deeper but gotta go!

10

Hi @76kid I noticed that you’re using both Display style settings (correct styles to use for this kind of interaction), but you’re also using Visibility settings for your modal elements.

Be sure to make the elements visible in all viewports via the settings tab:

1440×833 234 KB

And then only use the display settings under the Styles tab to make sure you get the desired effect on the modal elements.