Responsive design using media queries

Hi @klabruben3!

Replying here from your comment on my solution for a different challenge.

I am by no means a Vite expert and I imagine this is probably not the preferred way for any kind of production site, but the way I got this to work was to do the following:

1. On your local machine run npm run build. This will take all your react code and compile it to js the browse can understand. It will produce a folder called dist which has the compiled code.
2. In my vite.config.js I added the base property so that any urls to assets would be relative instead of absolute. (This might not be needed, but it was for me)

export default defineConfig({
  base: "",
  // other configs
});

3 In .gitignore I remove the line dist. This allows you to check in the dist folder when you commit you code. The annoying bit here is that to access your code you will need to go to {your handle}.github.io/{repo}/dist/index.html

Because this isn't a production site I felt this was good enough to get something that I could use for testing and to submit for a solution. But Vite actually has some documentation on how to do this properly using Github actions that is probably worth a read.

https://vitejs.dev/guide/static-deploy#github-pages

Hope this help!

• @scottyroges