Screen Sizing ( CONSTRAINTS)


#1

Hi, I have a problem with screen sizes, on all Iphone all is good but problem comes with Iphone PLUS, tried to change sizes using constraints (Horizontal, Vertical) but unsuccesful
read this article but doesn’t help


can anyone help me out if some of you faced the same problem
will be super grateful
Thanks!


#2

Hi @Vako, can you be more specific about what issue you’re having with your element sizes? Using percentage values should make them scale better to different screen sizes.


#3

@Vako If you could show some screenshots on what you’re seeing as well as the constraints your setting for the elements in question. The more context you can share here the better.


#4

Please see the screen shots on the background you will be able to see percentage of numbers for changing sizing…


I’m doing something wrong or just don’t understand how this constraint works ?!


#5

@Vako 1 thing I’m noticing is that you’re giving an 8% pin on the left or right depending on the image. That’s why it’s not filling the width. Can you try centering the webview with 0px pin on the left and right. Notice that you can tap the % or PX buttons there in the constraints for the webview.


#10

I tried it also and this screen shots also sent to above reply
here are new screen shots tried both % as well as PX with 0px but still…
Don’t know what the matter ::frowning:



#11

This is a Bubble app you are showing in the webview, correct? Will you check the margins and image dimensions on the Bubble side. The webview may be fine but the issue may actually reside on the Bubble side of this too.

@seanhoots have you ever encountered a situation where you had a buffer area around a Bubble webapp when displaying in a webview?


#12

HI @wade no i haven’t seen this before.
I’ve done full screen width webview before but my background was white so can’t tell if there was some gaps like this that i didn’t notice.


#13

As you see Wade on the screen shot from Bubble platform, Width is 380 which is normal …


#14

@Vako have you tried viewing this same page in a mobile browser?

Chrome developer tools have iphone 6/7/8 plus that you can test with on chrome desktop if you don’t have the real device to test with


#15

@seanhoots Yes, I tried to test it on physical device I used Iphone 8 plus and from right and left sides their are still gaps as you can see on the screen shot

and in the bottom there is no any more gap as it was before, because I decrease the image size from top as you can see in the attachment, ( red line defines the sizes which i decrease before the image was on the phones whole screen)
but on right and left gaps can’t do anything with them :confused:


#16

Hi @Vako, what i meant was trying your webpage in a normal mobile browser not your app.
Since this is a webview if you were to enter the url in a mobile browser in the iphone 8 do you still see the gaps.
Just want us to see if this isn’t an issue with your bubble page itself as @wade hinted.


#17

Yes, @seanhoots unfortunately its the same , nothing changed …


#18

Hi @Vako, no you’re still not getting me.
I want you to open safari/chrome browser on your mobile phone and enter your bubble page url inside it.
e.g. if your bubble page is at https://vako.bubbleapps.io/version-test /login, i want you to enter this url in your web browser not in the dropsource simulator.

Just want to confirm this isn’t something coming from your bubble web page itself but an issue from dropsource.


#19

I’d be curious on what @seanhoots suggested here too above.

Also, I’m wondering if it’s normal to have that box checked that says “Make this element fixed width for the main page”. I’m not super knowledgable on the bubble end but it would seem like the page would have a level of dynamic sizing to fill the view encapsulating it (the webview).


#20

Sorry for the late reply
This screenshot is coming from Bubble so it means that the problem is coming from my Bubble application right ?!


#21

Yes that looks like a generic issue with your app displaying on mobile and something you’d need to address at the Bubble end.


#22

Hi @Vako

I think i had this problem as well and solved it by setting the preset page width to “mobile” and minimum width to 99.


#23

Thanks for your response
I have only one index page , others i am using floating groups or just groups for mobile App
I tried your way also but it did’t work
On the index page i did as you suggested

but on the group I put height over 1000, but because of Index page has 650, its not showing the rest side of the page
please see small video below, as you can see bottom side is hidden and its not showing the full height

Have any idea ?!
Thanks in advance !


#24

I have no clue what that could be, but like the others, I am convinced its a bubble issue. - I would ask over there.

  • Make sure all the elements are mobile and responsive as well.
  • Alternatively, redesign the entire page, might be faster than walking through all the settings.

Please keep us posted if you fix it. Apple is cracking down on hybrid apps that don’t run smoothly/look nice, from what I can read, so it would be nice to be on top of that!