# Is it possible to force the height of a group? **URL:** \ **Category:** Need help\ **Created:** [October 17, 2020, 12:46am UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594 "2020-10-17T00:46:54Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [October 17, 2020, 12:46am UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/1 "2020-10-17T00:46:54Z")
Hello Bubblers! My web app is composed on a main header, which is a group (image background) containing other groups. Is there a way to force the height of this group, so that it can adapt to any screens (laptop, mobile phones,…)? I found a way using Javascript, but the problem is that this group was resized, but the other groups of my page were not shifter (so the first was overlapping the following one, not nice…) Many thanks for any feedback or ideas to test! Have a nice weekend, take a rest and don’t Bubble night and day 😄 ---
**Author:** ![shpak.serhiy](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/shpak.serhiy/32/122411_2.png) [@shpak.serhiy](https://forum.bubble.io/u/shpak.serhiy)\ **Post date:** [October 17, 2020, 1:20pm UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/2 "2020-10-17T13:20:39Z")
Use Toolit plugin and inside this plugin there is a Herosizing element that will allow you to make the viewport height responsive. ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [October 17, 2020, 2:02pm UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/3 "2020-10-17T14:02:02Z")
Many thanks @shpak.serhiy, not sure to see what you say but I’m going to look at this further in the toolbox plugin! Thanks! ---
**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\ **Post date:** [October 17, 2020, 2:21pm UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/4 "2020-10-17T14:21:38Z")
You can use an html element on the page and use some code like in my screen shot ![Screen Shot 2020-10-17 at 9.18.36 PM](https://us1.discourse-cdn.com/bubble/original/3X/2/2/22aa091eaaea4925ab0d4538db4ced1f40a02723.png) 100vh is equal to 100% of the viewport height…100vw would be equal to 100% of the viewport width you would need to put the html ID Attribute onto your element ![Screen Shot 2020-10-17 at 9.19.58 PM](https://us1.discourse-cdn.com/bubble/original/3X/d/2/d2e0afa2b7c3fafde110791d669aa45f5412b83e.png) You should install the classify plugin which provides for a lot of useful functionality of CSS through HTML elements…I believe for the above to work you would need to install the plugin. Once it is installed you don’t need to do anything else with it ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [October 17, 2020, 3:20pm UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/5 "2020-10-17T15:20:24Z")
Wow, THANKS @boston85719 ! 👍🏻👍🏻👍🏻 ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [October 17, 2020, 3:33pm UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/6 "2020-10-17T15:33:49Z")
It works as expected, many thanks again @boston85719 The only issue I have to resolve is that if a background image is set to a group, resized using this method, the group is correctly resized but the image isn’t. Weird… ---
**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\ **Post date:** [October 17, 2020, 3:40pm UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/7 "2020-10-17T15:40:06Z")
I suppose the image is set as the background style and of type image? If that is the case it is strange that it is not resized properly. ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [October 17, 2020, 3:44pm UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/8 "2020-10-17T15:44:49Z")
Yes, the image is stored in the database, and set as the dynamic background of the group, with type image. I’ve tried to remove any image transformation (from Bubble and from imgix), but the image still does not stretch to fit the viewport width and height, set both to 100%. Indeed, it’s strange. But the group itself is correctly resized to match the 100% width/height, so I will try to remove the background image, then insert a new group in this first group, containing a mn image and I will try to resize both the group and the image itself. ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [October 17, 2020, 3:45pm UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/9 "2020-10-17T15:45:53Z")
Hum… Unless the image size is to small, in that case maybe this image width and height can’t be extended? ---
**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\ **Post date:** [October 17, 2020, 3:49pm UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/10 "2020-10-17T15:49:53Z")
I would try first with a larger image to see if that is the case…if not then you can apply the same code to an image element ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [October 17, 2020, 4:06pm UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/11 "2020-10-17T16:06:14Z")
I try with a high res image, and same result. The group is resized, not the image. But I also noticed one thing important : this group is a header, and in my app, I propose 2 kinds of headers to my users. So depending on their choice, one of the 2 “header” group is hidden. And problem : if I use the html element + classify to resized these groups, when they’re supposed to be hidden I got them displayed, but empty… So it seems this resizing method does not work with hiddable elements. ---
**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\ **Post date:** [October 17, 2020, 4:12pm UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/12 "2020-10-17T16:12:16Z")
Put a conditional onto the html element and use the html only when that conditional is met I use this method to create a full page image for a popup ---
**Author:** ![Christophe\_HK](https://avatars.discourse-cdn.com/v4/letter/c/d78d45/32.png) [@Christophe\_HK](https://forum.bubble.io/u/Christophe_HK)\ **Post date:** [October 17, 2020, 4:23pm UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/13 "2020-10-17T16:23:42Z")
Wo, great idea! I’m gonna try ---
**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\ **Post date:** [December 26, 2020, 12:46am UTC](https://forum.bubble.io/t/is-it-possible-to-force-the-height-of-a-group/116594/14 "2020-12-26T00:46:56Z")
Closed on December 26, 2020, 12:46am UTC This topic was automatically closed after 70 days. New replies are no longer allowed.