Adaptive Design

Hi Everyone,

I recently moved my single page application to Responsive because it saves me the use of some plugins, and I can keep everything as lean as possible. However, I’m cautious with flex-box and the responsive behaviour because I don’t want the line lengths and overall proportions of the page to dynamically adapt to the page width. In my case it’s important that a certain line of text carries, say, exactly 63 characters at all times.

What would be nice, though, is to adapt the design of the page as a whole once a specific page width is surpassed, eg «When this Page’s width ≥ 1440» then make all groups, shapes, texts, images, etc. proportionally bigger to each other at once. I believe this is called adaptive – as opposed to responsive – design.

But how do I implement such a function in Bubble?

I was thinking about redirecting to a page with an enlarged design «When this Page’s width ≥ 1440», but don’t see how that could work.

Has anyone thought about this, too? What’s a good way to approach this?

Many thanks for your time!

Wouldn’t setting a min/fixed width help in your case? If u need 63 characters at all times then just fix the width of that element to 63 characters.

Hi ihsanzainal84,
Thank you for your suggestion.
From a design perspective, it’s nicer when all elements get the same treatment. If I fix this one element while other elements are scaled, the proportions fall off the grid :wink:

Hi lstk.kb,
Thank you!
If I understand correctly, you applied those conditionals on an element- or group-basis. With potentially hundreds of groups or elements, I’d have to enter a lot of parameters, which could turn into a time-consuming and error-prone matter, if I need to change a break point and its relating condition.


Uploading: 08-07-2022 14-35-39.jpg…

1 Like

Dear lstk.kb,
I see. Great idea. That works for me! :slight_smile: