Prototype not filling screen on iPhone 7 plus and iPhone X white padding on both right and left side

[michaels78717313]

Hi there,

I'm hoping you can help?... I'm designing a new website for my company on XD. I'm just designing the mobile screens at the moment, I went with the iPhone X/XS default layout (375 x 812). When I review the design via the published prototype review link it fills the entirety of my iPhone 7 screen, however when my manager previews it on his iPhone 7 plus screen there is a white border on the right and left edges, similarly when the Marketing Director is previewing on his iPhone X, there is the same white borders on either side. Apologies if this is a bit of a "noob" question, but I could really do with some help on this :-s. I've recently started setting the element's responsive resize settings, but this doesn't seem to affect the prototype preview via the review link:

https://xd.adobe.com/view/617709da-0c0f-415a-5864-c0b2e31f715d-1746/

As the layout I went with is the iPhone X/XS one, I'm not sure why it would be shrinking the prototype down. 

Any advice would be appreciated.

Many thanks in advance.

Kind regards,

Michael

[Atul_Saini]

Hi Michael, 

Sorry that you ran into trouble while previewing the prototype and thanks for sharing the prototype link. Quick question here, is your manager checking this in the browser on in XD mobile app?

I would also request you to check if the artboard is set for vertical scrolling. If not, please set it to scrolling to vertical and test it again. 

Thanks,

Atul_Saini

[michaels78717313]

Hey Atul,

Appreciate you getting back to me. No worries at all.. I love the program, just trying to figure everything out...

Manager is viewing via safari browser on his iphone. Artboards are all set to vertical scrolling. I just wasn't sure if this was normal... Because I'm actually designing to a iPhone X screen, however, it only fills the viewport on my iPhone 7. 

I have just started setting the arboards to 'responsive resize', do you think that this might have something to do with it, or would that not affect the review link preview? 

Thanks,

Kind regards,

Michael

[Atul_Saini]

Thanks for choosing XD and sharing your feedback Michael. It matters a lot to us.

Suggestions, would it be possible for you to ask your manager to download Adobe XD mobile app for a better experience of the prototype? I'd also request you to set the prototype to fullscreen mode and try it. Choose "Custom" options from share mode. 

Meanwhile, I'd try to recreate these dimensions at my end and share my observations with you on the same.

Thanks,

Atul_Saini

[rumbler · Accepted solution]

Just adding this as I came across while searching for a solution to the white border problem. 

I found the way to get rid of it was to set the background rectangles to be 2px wider than the width of the artboard and set the x axis to -1. Same with the header background except there I set the y-axis to -1 as well. Bit of a pain but it got rid of the issue.

[Rishabh_Tiwari]

Hi there,

Thanks for sharing your findings, I am sure it will help others.

Regards

Rishabh