How to wrap text base on screen size

If you look at this URL:
https://app.greenbroad.co/auth

In this URL, text wraps as you reduce screen size. Please see below screenshot for more details. I have created main page layout as column and in that I have group also at column where I have put all those text and inputs but in my case, it does not wrap. I tried with min height as 0px and max height as inf px but it still did not work for me. Please suggest.

Is that your app?

If so, then what’s the issue/question…?

If not, then without seeing your app and knowing exactly how you’ve built the layouts, no one can offer much help (aside from the obvious, learn how responsive building works in Bubble, and double check all your layout settings).

So feel free to share some screenshots, or better still a link to your app and/or editor.

1 Like

Yes, that is my app. below is the URL of my app:

Below is the URL of my editor:

You’ve got minimum widths set on all your text elements… which means they can never get any narrower than the value set there, and so won’t wrap.

So remove (or change) those minimum widths.

1 Like

I did that but it disturb every thing. pls check.

1 Like

Now you’ve set max widths of 0px on all your text elements…

Thanks, that helps though it still does not wrap. Also how do I make them center aligned to my group?

Your parent container has a fixed width (which means it’s not responsive)…

If I were you I’d take a step back and learn the very basics of how responsive layouts work in Bubble…

Start with the manual if you haven’t already read it… Responsive design - Bubble Docs, then check out the video lessons as well… it will get you up to speed with basic things like this.

Thanks. Now my screen becomes responsive and show properly in mobile devices but it disturb the view I want in my PC. See I want exactly below screen in my desktop view with keeping my mobile view intact:
https://app.greenbroad.co/auth

Well, I don’t know what you’re trying to do…

But if you understand how responsive design works in Bubble then it should be simple to achieve whatever layout/design you want.

If you have any specific questions, then feel free to ask… otherwise just make whatever changes you need to your layouts.

Hmm. I was very clear in my question what I wanted to do. Still let me try again.
I am creating clone of this website in bubble:
https://app.greenbroad.co/auth

I have already shared my bubble based clone app details above. If you check it again, it looks good in mobile with text wrap but in desktop view it does not look like same as the website. How to achieve both togather?

Well, as I said, if you know how to use Bubble’s responsive engine and layout settings this should be simple. So I’d start by learning the basics.

But it looks as though you don’t have any max widths defined on parent group, so that’s what you need to change.

Thanks. It is working now.

This topic was automatically closed after 70 days. New replies are no longer allowed.