Pop up bubble over columns of logos doesn't work with responsive column grid

Hey there,
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?

Thanks!


Here is my public share link: Webflow - Broadband Consulting Services
(how to access public share link)

1 Like

You have several ways to address that issue.

I’m giving you the general directions, feel free to come back for more details.

  1. Instead of a width in % for the companies, put a width in px, it will force them to stack. Additionally, you need to make the height of the slider elastic so it adapts.
  2. use the ROW element, it has various layouts for each breakpoint (check in the Settings tab)
  3. use Flexbox, for a total control. Learn how to master Flexbox at www.flexboxgame.com

ok… set the logos to pixels and the slider to auto height. also set both to flexbox (i’m maybe flexbox proficient, not master…;). The problem is that the column height has to be set high enough to accommodate the pop up bubbles and so when i go use the row settings to try to set it to grid, it won’t work. ??

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.