Highlighted

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

New Here ,
Nov 06, 2019

Copy link to clipboard

Copied

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

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.

Topics

Mobile, Preview

Views

586

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Nov 06, 2019

Copy link to clipboard

Copied

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

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.

Topics

Mobile, Preview

Views

587

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Employee ,
Nov 06, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Nov 06, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Employee ,
Nov 06, 2019

Copy link to clipboard

Copied

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

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Apr 29, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Employee ,
Apr 29, 2020

Copy link to clipboard

Copied

Hi there,

 

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

 

Regards

Rishabh

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...