published prototype doesn't work

[sašab24091023]

Hello,

I've shared my prototype on web, but the home page doesn't fit the full sreen (way smaller), but other pages do. Really don't understand why? This happened before with my other work. Can somebody please help ...

Here is the link:

Adobe XD CC

Thx,

Saša

[arunk]

Hi,

Did you create all the artboards from a pre-built artboard type within XD? What I mean is - did you create a mobile or web artboard first, and then modify its dimensions manually?

Looks like you have defined a viewport height for the first artboard which is same as artboard height, whereas other artboards do not have viewport value set. Can you check this?

It would also help if you can share your .xd file with us. You can choose to send it privately only to me by clicking on my profile picture and attaching in the message.

Thanks!

[Ares Hovhannesyan · Accepted solution]

Here is some tips.

Previous behavior

Improved behavior

This mimics true browser behavior, as background color of the browsers is always white and does not  add a black background color by default.

Improvements in standard and full screen view:

• If the artboard width is greater than the available horizontal space, the prototype scales to fit the width with no horizontal scrolling.
• If you have defined the viewport height (set in the Property Inspector), the prototype fits to the height first and proportionally scales width to maintain the aspect ratio. You can also scroll vertically to view content that is below the viewport height.
• If the designed prototype is a web or a custom artboard, the published link in the web browser in full screen mode renders the content from the top of the browser window. Mobile and tablet designs continue to be center aligned in the screen.
• The background color in full screen mode is white instead of black. This mimics true browser behavior where browsers do not add a black background color by default.

Improvements in mobile artboard view:

• Content fits height wise and adjusts width to maintain aspect ratio.
• If you view the published link in a full screen mode on a web browser, the content renders in the middle of the browser window.