Responsive for Macbook high resolution screens

Hi!

My app looks like this on a Macbook pro 15inch 2880 x 1800.

I designed my page for 1600 width.

Is there any way of stretching the elements on my app so that they fit better on the Macbbook pro without having to create a brand new design for 2880 x 1800 (or larger like 5120 x 2880)?

Try adding max width of elements such as input and button.

What about the height of the page?

Hey :wave: @pachocastillosr

There is a really cool little plugin that does this type of thing. Check it out. Here it is with an example. :man_superhero: Hero sizing!

Editor: 805testapp42 | Bubble Editor

Preview: Your Bubble app

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
1 Like

thanks!!

1 Like

Hey! thanks again for your help.

I wanted to ask you if this plugin worked also to make entire mobile designs fit perfectly on mobile phones.
For example. I am attaching a screenshot below:

If I applied the hero sizer to the whole design (grouped in a same group) could it fit the botons on the navbar and everything as it is in the picture (where they should be) on different mobile phones with different screen sizes?

No problem. :blush:

I don’t think it works like that. What I would do is put the button in a floating group and attach it to the bottom of the screen. The options above will just scroll on the page, but the button will stay attached at the bottom of the page. That is what a typical app does.

Does that make sense?

Hope that helps! :blush:

Thanks for the quick reply! So what happens if there are phones with different screen height and width? Will the buttons below fit correctly to the bottom of all the screens?

1 Like

No problem. So the button would stick to the bottom of the page and then if the dropdown choices get cut off, the user will be able to scroll down to the options. This is good for the small phones that don’t have large screen sizes. It’s a typical UI/UX design to have it do that. Just make sure the floating group does not have a clear background otherwise it will look odd. Does that make sense? :blush:

So the buttons will stick to the bottom of the page no matter if some screens have a larger or smaller height? This is achieved using the hero sizer on the whole mobile design or without using the hero sizer? @J805

To have the buttons stick at the bottom of the page, you don’t need the hero sizer. That would be to just display like an image behind it if you want.

The buttons can stick to the bottom no matter what screen size by using the floating group. :blush:

1 Like

great! Thanks Jason!

No problem. :blush:

Here is an example of what I am talking about. Just so you can see what I mean.

Preview: https://805testapp42.bubbleapps.io/version-test/floating_group_button?debug_mode=true

Editor: 805testapp42 | Bubble Editor

Hope that helps! :blush:

Thanks for the demonstration! Got it! So you can use floating groups to stick headers to the top of the screen as well? @J805

1 Like

You sure can! :blush:

1 Like

Thanks Jason! You are very kind :+1:

1 Like

No problem. :blush:

1 Like