Hi community
Hope everybody is safe
I’m working on an interactive payment salary page in order to explain the legals aspect of each money contribution in the document.
I will have some simple icons with full screen pop up. In the below example, everything is ok when tested in webflow but when I’m trying it on ipad or iphone then I have not all the text on screen. Is it a design problem or something else…can’t find the answer myself.
https://preview.webflow.com/preview/paie-rh-bulletin-paie-interactif?utm_medium=preview_link&utm_source=designer&utm_content=paie-rh-bulletin-paie-interactif&preview=8ca1f28d4d2da8b0420dfcfaedd220fc&mode=preview
Also I would like to reuse the popup icon all the time with the associated events. Is there a way to do this in webflow
Thanks a lot for your help
Have a nice day
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi Emmanuel
Thank you and you as well 
The problem is that the height of your text inside of the pop-up is bigger than the viewport of your iPad/iPhone. To get around this problem you have to remove all your current overflow settings on all breakpoints. Then add overflow: scroll on the desktop breakpoint, which cascades down to all the other breakpoints.
Using overflow: scroll on an element will add a scrollbar, when child elements intersect the parent element’s box.
You probably have to manually add a popup icon each time, but if you wrap each popup modal and icon inside of the same parent div. You should be able to use the same interactions every time by targeting sibling elements with the modal class name.
Hi
Thanks for your kind reply. This is it, issue solved
Will check for the pop up icon too
Take care