Hi everyone!
I’d like to recreate the way these modals work on Apple’s privacy page:
On desktop it looks like this:
Whereas on smaller breakpoints it looks like this:
See for yourself: Privacy - Apple
Anyone have any idea how this could be recreated in Webflow, with different modal styles for different breakpoints? That would be awesome!
Thanks a lot 
Here is my site Read-Only: View Here
(Please scroll down for the Privacy section)
This would be very easy using the grid element. I recommend running through their tutorials to give you a better idea of how it works - Grid | Webflow University
The other option is to use flex, either option works!
Hey @bryanmanio, thanks for the reply! I’m already using the grid element for each card, but what I wanted to try and figure out was how you get different modals (like the in-card text in the second screenshot vs the full screen pop up in the third) on different breakpoints, the way Apple does it?
Gotcha. That’s going to be as simple as making certain elements hidden (display:none) depending on the breakpoint.
Looks like have two titles -
On desktop, they are showing the first title, and on mobile, they are showing the second. Here is something I hacked together. If this is what you’re looking for, mark this post as solved so others can find it!
https://webflow.com/design/apple-modal
Screenshots when the link above is no longer available.
I’m fairly new to Webflow but have worked in web development for a long time. I used this as an opportunity to learn more about triggers in Webflow. So I might have gone a little overboard in replicating the look.
Live demo:
https://apple-privacy-modal.webflow.io/
Looking at Apple’s code they use two separate containers, one i desktop and one on smaller screens. So the modal is completely detached from the grid. This is one way of doing it but I wanted to try to do it with just one. But everything works pretty much the same. It is also contained so that the More button only affects its siblings, demonstrated by adding the Maps feature underneath. Apart from the video it should be straightforward to use this as a Symbol or Collection item.
This is awesome! Thank you so much for the help!
Any chance you could implement the blur on the mobile popup (feature more)? saturate(180%) blur(50px) I believe it is.
But yeah, this is seriously so cool, thanks again! 
Hey, the preview link doesn’t work anymore - please could you send a new one? Thanks
