I’m redesigning a site here on webflow for a client. his site was originally designed by pronto and he owns all of the content, design, and everything, but if you want to discontinue using pronto, they will send you an xml file but not the Wordpress template. so I’m recreating his site in webflow (since we have rights/permission to the site content and design).
One thing that I’m trying to create is a pop up bubble that has information on partner companies. The tricky part is that the logos for the companies are listed in a slider that has 2 slides. When you click on the logo for each company, a pop up bubble comes up giving you more information and a link to their site.
I did watch the how to create a pop up modal in webflow video and that’s really great instruction but doesn’t help with exactly what I’m trying to do.
So I created a slider with 2 slides and I created the first pop up bubble with an interaction so that it will appear when you click on the logo. It’s created so that it has enough room to expand vertically depending on the amount of text in the bubble.
This would work for desktop but it doesn’t work when I try to make it responsive. Since I had to create tall columns to accommodate the hidden bubbles, when you switch devices the logo squares will not stack and create a grid like the original site created by pronto.
Here is the original site: http://www.broadbandconsultingservices.com
if you scroll down you will see how theirs works and what I’m trying to recreate but I can’t figure out how.
Of course there are other ways that I could design an informational pop up bubble but I really wanted to stick with this design that my client likes.
Can anyone figure out how to do this even when the sliders are bumped into a grid on a smaller screen?