Resizing content so it doesn't look crazy

Hello,

This is likely a very basic query but I’ve been struggling for hours on it now. My existing site is built on Wordpress. When the user resizes the window the content collapses in and 3 blocks that were arranged horizontally (see first image below) change to being stacked horizontally (see second image below).

This does not happen in Bubble. Everything is fine when the window is full size (first image below), but if I make it narrower everything goes haywire (second image below).

Any idea what I should be doing to make the content resize properly? If there’s a video tutorial out there it would be fantastic.

To be fair, it is doing what you are telling it to do, which is when you go below a width that is smaller than 3 groups wide, put the next group on the next line.

1 fix would be to switch from the 3 wide repeating group to a single width one when current page width < minimum width of the 3 groups (ie when the change happens)

you can also mess around with the responsive tab.

It is common to transition to a more mobile friendly version when current page width < 600px

1 Like

Thanks for the reply @nfish! That’s really helpful :grinning:

I’m having the same problem with my hero image and search bar - any idea how to approach a problem like this? (i.e. not a repeating group)

Thanks again.


No Problem. Just group them together and fix the widths if you don’t want elements to change relative to each other. however what it is doing doesn’t necessarily look wrong. If you insist on having them on 1 line, make sure it can scale down to 300px and still work.

1 Like

Perfect!

Is it possible to start by designing in 300px and then have the content expand out for larger screens perhaps?

Could be a silly idea but just wondering…

It depends on what the app is for. Personally, the web apps that I am developing at the moment will that will be used on a PC or tablet, So I I work at 1200px, as that is pretty much the minimum screen width of a laptop or desktop these days. But I always keep in mind that things need to respond down for a mobile screen so allow for rows of elements to stack up on a phone screen. It takes time to understand the best practices for responsive web apps, but the more you play with it, the more you understand it!

1 Like

Fair enough, thanks again for the help @nfish.

@alexcooney5 you should also watch this video, really helpful to understand how Bubble’s responsive engine works

2 Likes

Thanks @ambroisedlg, I’ll check it out :smiley:

Good shout, I am by no means an expert!

@nfish just an fyi - found this brilliant tutorial video from @duke.severn. He shows how to build RG’s for 340px first, that then expand out into larger screen sizes.

Found it really useful so thought you might too :smiley:

1 Like