CODEWITHSUNDEEP
htmlcssnext.jstailwind-cssweb3js
HIMESH POTNURU
HIMESH POTNURU

Reputation: 1

Website Layout and Images Misaligned After Deployment on Vercel

I developed a website using Next.js, Tailwind CSS and Blockchain, and everything works perfectly on localhost. However, after deploying the site on Vercel, the layout is completely misaligned, and images are not displaying as expected.

In localhost:

In vercel deployment: enter image description here

enter image description here

Here’s what I’ve tried so far: Checked for missing files in the deployment. Verified all relative and absolute paths for images. Ensured CSS files are being applied.

It would be really great if the layout and alignments are the same as the localhost.

Link to repo: https://github.com/harisankarrnair/CrowdMantle

Deployment link: https://crowd-mantle.vercel.app/

Upvotes: -1

Views: 49

Answers (1)

Wongjn
Wongjn

Reputation: 24263

One of your content file globs in the client folder has ./components/**/*.{js,ts,jsx,tsx}. However, this folder is uppercase on the first letter, Components. This could cause the difference perhaps if your localhost OS is case-insensitive while Vercel could be case sensitive.

Thus, consider adjusting the content entry to match the casing of the folder:

"./Components/**/*.{js,ts,jsx,tsx}",

Upvotes: 1

Related Questions