How to make my page fit mobile

AnthonyLakey · 2020-12-22T19:20:49.632Z

Hello everyone, So I’m building a social network. I got the pages done. I’ve replicated almost all the pages and made a mobile version of the page. However, the index page is something I would like to be able to adapt to any screen without a separate page since it takes the most work.

system1927×893 473 KB

system2919×893 28.3 KB

as you can see these repeating groups have a lot involved and I don’t want to recreate it for mobile. I tried using max-width settings etc, I can seem to get it to work. Any ideas?

adamhholmes · 2020-12-22T19:56:43.615Z

What’s the issue?

AnthonyLakey · 2020-12-22T20:03:43.462Z

The issue is the post the user made looks good on the computer. But when I launch on mobile, the repeating group (users post) is all messed up and not inline. How can I make it look good on pc and mobile when it is a large repeating group? I don’t want to make a separate page for mobile.

adamhholmes · 2020-12-22T20:07:35.381Z

Without seeing it, or knowing more details, it’s impossible to say, but sounds like you’ll need play around with the responsive settings in the responsive editor to get things to display the way you want them to.

It can be tricky at first to understand how it works, but with a combination of trial and error, and using the bubble reference you should be able to get your head round it.

You’ll need to experiment with minimum width setting and margins until it works how you want it to on all screen sizes.

AnthonyLakey · 2020-12-22T20:08:43.295Z

thank you!

AnthonyLakey · 2020-12-22T20:12:48.140Z

see on mobile it now looks like this:

system3help345×870 9.35 KB

adamhholmes · 2020-12-22T20:14:16.776Z

What’s it supposed to look like?

AnthonyLakey · 2020-12-22T20:15:58.424Z

I want it to look the same as computer just shrunk to screen size. As you can see, the mobile has it as a really long narrow post.

adamhholmes · 2020-12-22T20:17:56.664Z

How does it look in preview?

AnthonyLakey · 2020-12-22T20:24:14.322Z

looks like this on preview:

system3help345×870 9.35 KB

Looks like this on actual phone:

IMG_14051242×2387 191 KB

And i want it to look like this on phone:

system1927×893 473 KB

Brayan_Cruz · 2020-12-22T20:46:57.340Z

Hi @AnthonyLakey, it’s easy.

Put in “responsive” and there you can fit your page

2020-12-22 (7)_LI260×698 55.6 KB

Play with that, it most easy than you think

image1366×768 52.8 KB

adamhholmes · 2020-12-22T20:48:12.563Z

If you’re referring to the position of the heart and speech bubble then make sure you group them together with the ‘11 hours’ and blue icon (so they’re all in one group) and make that group fixed width. That should keep them all on the same line.

As for the main image, make sure that’s fixed width as well.

AnthonyLakey · 2020-12-22T21:01:44.220Z

Thank you! will try it

AnthonyLakey · 2020-12-22T21:05:26.722Z

The repeating group is narrow on mobile and wont let me change the width. So everything is smaller then it needs to be for mobile.

cmarchan · 2020-12-22T22:18:25.063Z

Hi!

I suggest you watch this session about responsiveness by @gregoryjohn . Very worth your while > How To Do Responsive Design in Bubble with Gregory John

system · 2021-03-02T19:20:52.880Z

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