Aligning Picture to Always be at Bottom of Shape

Need help Responsiveness
1

I’m trying to mimic this website:

Specifically the picture of the dude with glasses on with women’s hands on his face. The image is anchored to the grey background no matter what the size of the browser is. I can’t figure out how to do this in Bubble

2

Well, the good news even custom code sites like the one you reference can’t always anchor it correctly either (see screenshot at the bottom).

In all fairness, this isn’t trivial to implement. I’m not quite sure what the best way to do this in Bubble would be. A few potential solutions:

  • You could create a couple different layouts based on the width of the users browser and then use conditions to show the most relevant one. This seems straightforward to try. Don’t know what problems your running to though, so hard for me to know whether this would be easy to make work.
  • You could use CSS Tools and or MoveIt (perhaps other plugins too) and manually calculate how tall that section is and then re-size or move the image so that it’s anchored. This would be more complicated to implement, but seems like it should get to you a viable solution.
  • You could almost certainly hire someone to write a few lines of Javascript to anchor the image to the bottom of the group as well. It’s a 5-30 min project for someone who knows javascript well.

Best of luck

PS - here’s the screenshot of the page your trying to mimic:

Screenshot_593
Screenshot_5932967×1379 729 KB

3

Thanks for the response - I just decided to not scale the image as the page scales. It’s not exactly what I wanted but it stays anchored to to bottom of the other shape. I’ll probably try the Javascript approach you suggested once I have more time.

1 Like
4

@walshv10 i know its been a while but let me know if you had a chance to write that JS!

Thanks!