Adobe XD multiple page responsive export for html

New Here ,
Feb 12, 2022 Feb 12, 2022

Copy link to clipboard

Copied

Hello! 

I am creating a portfolio website for school and I am new to XD. I have created a multipage responsive website for computer, tablet and phone. I am having the most trouble trying to get this to export correctly. Its creating it where my pages are overlapping one another, like my contact page is overlapping my portfolio page. I just need help figuring out what I am doing wrong so I can upload the html information to a server. Thank you in advance. 

 

 

Screenshot (28).png

TOPICS
How to , Import and export

Views

185

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
community guidelines
Adobe Employee ,
Feb 13, 2022 Feb 13, 2022

Copy link to clipboard

Copied

Hello,

Thank you for reporting the issue.

It would be great if you can share the sample of this file, so we can check from our side whats went wrong. Ideally while exporting through XD , it should export each artboard separate. There can be no reason of overlapping of artboards. 

I would like to know more info like how you exported the artboards,what selection you made along with the sample file.

 

Regards,

Anita Subedi

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
community guidelines
New Here ,
Feb 13, 2022 Feb 13, 2022

Copy link to clipboard

Copied

I would appreciate any help given! I have attached my XD file and I'll
share the links for each view {web 1920, web 1280, tablet 800, phone 360}.
https://xd.adobe.com/view/5a1016f5-3e47-4fd0-b4f2-441b20de791f-0f43/
https://xd.adobe.com/view/266ecfde-b615-4f81-897b-4ff97b48306e-733d/
https://xd.adobe.com/view/4358fd5b-421d-408b-9c88-4d3e2e56171e-160b/
https://xd.adobe.com/view/3095f9b1-622d-47cc-b111-c841a5ac7a2a-65c6/

When I was exporting I was trying different things as I found tutorials
online. None of which had multiple pages and sizes like mine to make it
responsive.

- Lindsay


PortfolioWebsite (11).xd

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
community guidelines
Adobe Community Professional ,
Feb 14, 2022 Feb 14, 2022

Copy link to clipboard

Copied

LATEST

Hi @lindsaytaylor13131313 , it looks like you created your design in the right way, (in multiple flows for different resolutions) I think the problem here is the way you create the html, I suggest you to get help from a front end/html developer or search forhtml/css responsive coding tutorials etc, because it looks like you export images for different resolutions and in html they're placed on top of each other, in a responsive website, different layouts should be hidden and only the layout for that resolution should be shown. As far as I understand you just want to show layouts as exported images based on the screen resolution, so as a start (after a quick YouTube search) this tutorial will help to understand media queries/change layout based on resolution: https://www.youtube.com/watch?v=lAOkx2yZESY you can also check https://www.w3schools.com/css/css_rwd_mediaqueries.asp Hope this helps, good luck!

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
community guidelines