How to force groups to be same length on all device views?

I have these 3 groups. I would like for all of them to be the same length, regardless of screen size. Any ideas how to do this?

image

(For this view, the blog posts are hidden when the page gets to </600px)

Might a repeating group be a better option?

CSS is how I do it.

I use the classify plugin to make use of CSS…so if you don’t already have it installed, install it

Then you can add a ID attribute

{addClass: "elementID"}

Make sure to have the same set up as the example here where elementID is whatever you come up with to keep track of the element in the code.

Then on page add an HTML element

<style>
     .elementID {
         height: 220px !important;
         overflow-y: auto !important;
         overflow-x: hidden !important;
}
</style>

The height will restrict the height and the overflow-y will add a vertical scroll bar to the element so that the buttons and extra text you show are scrollable

1 Like

So, I added the plugin, but it’s not showing as an available element. Am I missing something?
image

That’s as expected. The classify plug in is not an element. You simply add a class to an element, by using the ID Attribute, like Mr Boston said.

But first you have to enable the ID functionality in bubble. Do this by going to Settings> General and in the General appearance area, enable the Expose the option to add an ID attribute to HTML elements.

Now in the properties panel of an element e.g. your group, if you scroll down to the bottom there will be a new field called ID Attribute.

This is where you will add the class, the {addClass: “elementID”} that Boston was referring to.
From here, you’re good to go by following his instructions.

In case want a visual as it is sometimes a bit hard to see

1 Like

Took me a few days to get back to this, but this works great. Thank you!

Thank you for the explanation. I’ve never used CSS before, so this explanation was very helpful!

1 Like