Adobe XD multiple page responsive export for html

Forum|Forum|4 years ago
February 13, 2022
1 reply
1680 views

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.

This topic has been closed for replies.

A

Ansubedi03

Community Manager

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

lindsaytaylor13131313Author

Participant

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

AkinGn

Community Expert

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!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded