Unresponsive Container

Hi All,

I’m a newbie so please be kind :grin:

Okay so I’ve spent the last week or so (seems like a lifetime) building my new app. Everything going great, apart from elements are not responsive to different screen sizes.

I have one container that I think is likely the problem as the rest seem fine, strangely it’s a componant I used from Lists. It either overlays the container below and/or doesn’t adapt to different screen sizes.

I’ve spent hours trying to resolve this, anyone have any ideas? I’ve used ChatGPT - Bubble GPT, but doesn’t seem to fix the problem.

Any help/guidance gratefully received.

1 Like

Do not use fixed width/height because it doesn’t change with screen size. You can uncheck Fix width to content checkbox so that it cover the whole page, maybe if you need smaller width, then can set max width with some padding left and right then center align the container, in this way for bigger screen max width will keep the container narrow but for mobile device it will be full screen.

Thanks, that’s been very helpful and sorted most of my issues. Last remaining issue is that a container (in mobile view) overlaps another. As it happens it’s the same one doing the overlapping that was not responsive previously.

Cheeky I know, but I really appreciate you, do you know how to resolve that too?

Thanks either way, you’ve been a great help!

1 Like

If you use “Fixed” or “Align to parent” alignment, then it can overlap, that is why it is better to use “Row” or “Column” alignment.

Suppose, there are two div showing side by side in desktop view. For each div’s conditional tab you can add a condition if current page’s width < 768 then set min width to 100%, in this way when the page width is less than 768px then both div will show in each line. For spacing, you can add row gap and column gap on the parent div.

1 Like