Dynamic Height and Width of Bubble Elements - New Plugin from Zeroqode

We have just published a new plugin - Dynamic Height and Width of Bubble Elements.
This plugin would allow you to dynamically change any element’s height/width depending on the viewport or page size.
In case you choose the “keep proportion” option please make sure the element that you apply it to has “fixed width” enabled, otherwise the responsive settings might conflict with the plugin width adjustment.

For details, screenshots and demos please visit Dynamic Height & Width of Elements Plugin for Bubble | Zeroqode

If you have questions about this plugin or need any help, please reach out at https://forum.zeroqode.com.

For instructions how to set the ID attribute to a Bubble element please visit this ID attribute guide:

Levon Terteryan
Founder @ Zeroqode & Bubblewits


Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services


If I use this plugin to control say a Group acting as the hero section of my website, when the viewport/page size changes will the elements inside this Group stay centered as well, example “call to action” button etc…?


they should, but the best is to try, and if something doesn’t work as expected we can look into it and try to fix it promptly

Hey @levon, can I transfer this plugin between different apps? I would like to use/test it in a test app and then move it over to my live app once I get a solid understanding of how it works.


Hey Brett,
i don’t think it’s possible but you can subscribe to the monthly option on the test app, use it as long as you need ( you will be charged for the actual number of days used not the full month), then uninstall it and buy with a one time payment on the live app.
hope this helps

Perfect, thanks I will do that.

Just subscribed to the plugin which works great. Only issue im encountering is when I create say a hero section for example using 100% height of viewport, I would like to keep the CTA button centered within that hero/group containing the dynamic height plugin settings keeping the CTA button centered as the viewport height shrinks from desktop to mobile. This doesn’t seem to be possible with current plugin unless I am missing something on my end.

right, the centering option is part of the responsive settings of Bubble while our plugin interferes with that by forcing certain height and width. However we have another plugin that can change the position of any element, if you can calculate the exact x,y position of where the button has to be then you can manipulate that :slight_smile:

Hi @levon ,

Does this work for dynamic height/width based on user input stored in data field? I’m building a Canva style app, and the user can choose dimensions or enter them. Then we have a ‘canvas’ group element that needs dynamic height/width based on those variables - does this do that?

Hi Reece, i think for that you can use this plugin https://zeroqode.com/plugin/move-and-resize-bubble-elements-1526288794550x294926147549659140

1 Like


Hey Reece, did this work for you? We need a similar behavior. How’s the Canva-style app coming?

I ended up scrapping it haha and deleting the app in the end. Can’t help here but i’m sure it can be done :slight_smile:

I’m super new to Bubble, so apologies if this is a silly question, but can I use this plugin to make the entire app fit the viewport? I’m making a native app and I want my index and the repeating group on the index to match the height of the viewport.

Hello, @jcpollari. Thanks for reaching out :slight_smile:

Yes, you can use this plugin for your purposes. But also I can advise you to take a look at the responsive settings of your app and use Floating groups. They can do a job too:

The Floating group can “pin” your repeating group to the height of the viewport and responsive settings will make your page look fine on different mob devices.

A bit more info about responsive settings you can find in the 3rd lesson of our course Bubble for Beginners:

Hope this will be useful for you :pray:
Zeroqode Team

Awesome, thanks so much for your detailed reply. I will give this a go.

1 Like

Hi again. I can’t work out how to pin the height of the floating group to the viewport. I tried following the instructions in the video you linked, and the course lesson 3, but I couldn’t see how to fix the height. I’ve tried other fixes in the forums but no success. Do you know of any other resources I could use to learn how to do this with floating groups?

Hello, @jcpollari.

If you want to pin the floating group to your page and make it dynamically change, depending on the device viewport, you need to set its parameters to:
Also, this group should be the same, or as close as possible, height as your page.

I hope it helps :slightly_smiling_face:

Zeroqode Team

Thank you, that seems to be working now for me for sizes smaller than my page height (not quite with ones bigger yet - there’s a big gap until my footer) - I imagine that your plugin does a better job so once I’m ready with all the other functions I will give it a go with the plugin. Thanks heaps!

Hi @levon, I have just purchased the plugin for my app and started playing with it. I can’t find out how to get it to do what I want though. What I want is:

  • Header group floating relative to top (with nav icons and text logo)
  • Middle section with cards taking up the full screen, minus footer
  • Footer group floating relative to bottom

So, how I have the dynamic- height set is:

Here is the result I get (note, no floating footer visible):

I realise why it’s not working is because I don’t know how to make it that I want the footer at the bottom below the repeating group. Is there a way to do that? Like, repeating group height = 100% minus the pixel height of the footer?

Also, when set at 100% the card section is still cut off at the bottom of the page:

Here’s the test version URL (it’s native so drag your viewport smaller than 500px):

Thanks for your help!