Search code examples
javascriptcssreactjsreact-grid-layout

React Project Looking Different on Localhost and gh-pages enviornment

React beginner here trying to make a portfolio. I ran into an issue which I could not find any answers for hence posting here.

My project uses react-mdl and particularly the projects page, which uses a <Grid/> component. When I view my project in a mobile interface (tested on FireFox and Chrome dev tools as well as a mobile device (OnePlus 7 Pro)), I get my desired layout. However, when I pushed the same code to Github Pages, the layout was remarkably different and certainly not appealing to the eyes.

The following screenshots should explain it better

Localhost view

Localhost view

Github Pages View

Github Pages View

I am not necessarily sure what exactly is causing the issue and have tried multiple "fixes" which have unfortunately not worked out thus far and would really appreciate a push in the right direction.

I also apologize for linking the code and not posting it directly, however, I did not wish to clutter the post with that much media since the files are relatively big.

Thank you in advance and please let me know if I can provide any more information, I would be very pleased to.

Solution

  • It looks like the public folder in your repository hasn't changed in the last month. If you aren't building your project before deploying it to gh-pages then your live website will be using an older version which likely has these formatting issues.

    Use npm run build, and then npm run deploy. This will update your public folder with the latest changes you have made, and then deploy these newer changes.

    You can read more about the public folder for your CRA here - https://create-react-app.dev/docs/using-the-public-folder/