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
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
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…
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.
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.
