Hero image in new responsive engine

Hello Everyone,
I have done hero sizing previously, but not able to do so with the new responsive engine?Can anyone guide me with this or share some resource.

It should be fairly simple… can you elaborate on what problems/issues you’re having?

Check this link

I want to create a hero image as given in the home page(only image not the video)
Can you please guide me how to achieve that?

Just add a container element and make it full width, give it an image background (or add an image element inside it), and set your max height accordingly…

Again, I’m not sure what issue you’re having here - it should be as simple as that… so you’ll need to elaborate on what trouble you’re having if you need any more specific help.

I want to keep image height equal to viewport height.
If i set max height then height won’t fit according to screen size.

I want to keep image height equal to viewport height.
If i set max height then height won’t fit according to screen size.

I see… (the link you shared above doesn’t have that, so I wasn’t sure what you were asking)…

Anyway, I don’t think that’s possible in standard Bubble (there might be some plugins for it), but you can probably use some custom JavaScript to get the viewport height and then apply it to the image height if that’s what you’re trying to do.

@vaibhav.malhotra1221 :wave:

You can with the new responsive engine. It’s actually easy. You can now make the image 100% of the height of the page. I think that’s what you are trying to do right?

Instead of px, change it to %. Most people overlook that it’s even possible.

Is that what you are looking for? :man_shrugging:t2:

Yes thats what I am trying to achieve.But 100% of the page height means complete page height, not the viewport height.I hope I am being clear.

Hmm :thinking: Let me experiment with the new engine a bit, I think I was able to get it working before.

Otherwise, do the plugins not work for that any more since the upgrade?

Hey @vaibhav.malhotra1221 :wave:

I did some testing, it’s not the best, but I got it to work. Check it out:

Preview: Your Bubble app

Editor: Test805421 | Bubble Editor

100% is actually the view port height in this example.

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

This topic was automatically closed after 70 days. New replies are no longer allowed.