CSS expert needed

Hi,
It’s not a big job, but it’s a problem I can’t currently solve.
I have a page where one of the main content elements is a 16/9 aspect ratio slide, and I can’t get the exact behaviour that I need.

This video > css-gig shows what’s happening and what I need it to do.

Please let me know if this is something you can help with and DM me with your rates.
Cheers
Oli

Have you tried letting the width be responsive, then using CSS to set the height to the element's width * 0.5625 (9 divided by 16)? Then mess with the checkboxes/values for height in Bubble to allow the CSS to do its thing.

I’ve been trying many things including that for 4 hours and can’t get it right.

1 Like

Hi Oli,

Did you get this worked out? I’m not convinced custom CSS is needed. I did the following with 100% pure Bubble…

left
centered

In one, the slide is pinned to the left, and in the other, it remains equidistant from the sidebar and left edge.

I have a few questions though:

  • Is the sidebar fixed height and/or width?
  • What type of Bubble element is the “slide”?
  • How is it supposed to look/behave on mobile?
3 Likes

Hey there, wow, okay that looks great. And no I didn’t make any more progress on it.
Both are great, I think option 2 is what I’d be looking for.

To answer your questions:

  1. Sidebar is conditionally different fixed widths
  2. The slide is a group with a 1x1 RG inside
  3. Mobile isn’t important for this feature

What can I do to get your example (and compensate you)?

I think it would be best for me to see what you did and try to replicate in my environment first.

if you wanna ping me at oli@presflow.com we can figure something out