Responsive design issues

Hello,

I have read a lot about responsiveness in Bubble but I still have issues after trying to resolve it.

In my app I always have an image at the left and then the texts at the right (cf screenshot). But the image moves when the page’s size is smaller. And if I make it fixed width it’s placed on top of the texts. So neither of these solutions are solving my problems. Does anyone knows how can I do ?

Thank you a lot for your help !

What behavior do you want to have happen on smaller screens?

Hello,

When the page get smaller I want the image not to move from his position and that the text isn’t placed behind the image. But I can’t let the image fixed width

Thans !

Hey there @msalinier :wave:

If the text is going behind the image, that means that you have some elements overlapping each other. You want to make sure the elements are side by side and not overlapping. Also, it could be that there is some other element overlapping both of them to be causing the text to be placed behind the image. I know it’s frustrating but you will get the hang of it. :blush:

There are a few videos I have on responsiveness: https://www.nocodeminute.com/1-minute

Other posts about responsiveness: Responsive Concepts

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes

Hi guys, I’m facing a similar issue.

I’m trying to create a responsive design for my app. It’s primarily mobile but depending on the phone size it should adjust the design to be seamless.

I tried to use the new responsive engine but even though i set the width to “inf” on all elements, there is still a small white space that stretches through the whole page on the side of the phone. I coloured the background of the page grey to make the problem more visable.

In the editor this white space doesn’t appear but in the preview it does when opened with a phone.

Would highly appreciate your input!

Here is the preview: https://app.getkork.com/version-test/resp_index?debug_mode=true
Here is the editor: Kork-passions | Bubble Editor

Thanks, Daniel.

Hey there @larsh!

Your links are restricted and we can’t access it! :slight_smile: If you see your page stretch on the new repsonsive engine, it is definitely due to a element/group with a minimum width/fixed width that is more than the screen size. Do check every element in the side menu to ensure the minimum widths are removed.

Hope that helps!

Regards,
Jordan Loh
Bubble Coach