Three images side by side responsiveness

Need help Responsiveness
1

I have three images side by side like so:

image
image945×377 300 Bytes

when the page is wide.
Then when the page is narrow, the images stack as I want them to like so:
image
image369×953 276 Bytes

But the problem is in between, they stack like so:

image
image609×905 395 Bytes

Any ideas as to how to prevent the in between stacking behaviour? I tried putting a max width on the right image but then it just stacks like this:

image
image641×701 351 Bytes

Which I also do not want, I only want the images to be either in a 1 x 3 grid or a 3 x 1 grid, no other combinations. And when they are in those configurations, they scale to take up the width of the page.

Any ideas?
Thanks

2

I’ve spent many frustrating hours on this exact thing. The best ideas I have (that work for me) are

  • put a fixed width on all 3 boxes
  • put each box inside a group with margin on each side
  • make the righter most group fixed margin on the right - the other two center margin
  • all 3 are in a max width container

Screenshot 2021-09-23 at 12.55.02
Screenshot 2021-09-23 at 12.55.021550×376 659 Bytes

Screenshot 2021-09-23 at 12.58.13

It was lengthy trial and error to find this out :frowning:. I read a lot about responsiveness and it still seems so guessy to me.

About Me

I’m a Bubble Freelancer. I like Bubble coaching and making plugins for tricky API’s.

My Bubble plugins Pleased to say all 5* reviews.
1 to 1 coaching with nocodeguides.io DM me for a free voucher code if you want a quick chat.
My Youtube Channel Mostly about my plugins.

My Freelancing Website

@lindsay_knowcode

3

Thanks for the response.

I’m trying it out right now but the fixed width on all three boxes means that the boxes won’t stretch to fill out the page. Have you found a way to do it without the fixed width?

Also, putting the above aside for a second, I am trying to implement what you said but not getting it to work. When you say, make the rightmost box fixed margin on the right, do you mean the rightmost box or the rightmost group? I have tried both and they both still end up with 2 at the top and one underneath.

4

I meant group. I had absolutely no clue how responsiveness worked until I bought this book - which I recommend if you were starting from 0 like I was.

I still find it frustrating TBH.

5

I will definitely buy it. Thanks.

Sorry, but just to confirm. You said fixed width on all three boxes. Have you found a way to do it without a fixed width so they can stretch?

Thanks