Live site looks different than on my local host

[lelisiario]

Select Topic Area

Question

Body

Hey guys,
I published a portfolio site to GitHub Pages, but it looks very different than on my VSCode. My instructor and TA said it could be a caps issue, so I changed all of the caps in my html code and corresponding HTML to lowercase. That didn't solve it, but my instructor said that I needed to use "git mv" to get the name change to stick. After looking at my repo he said it would just be easier to change the path like the TA mentioned. Tbh I don't know what that means and I don't want to sound like an idiot because we are onto JS and APIs. Can someone please help me out with this? I need to work on other projects and can't be hung up on this anymore, but having this issue will make me lose significant points.

Thanks in advance!

[NipulM]

Hey there! 👋🏼

I took a look at your repository and cloned it to see what might be causing the issue. It seemed to work fine when I accessed it locally, but then I noticed something in the index.html file.

You've linked your CSS file like this:

<link rel="stylesheet" type="text/css" href="./assets/css/style.css" />

But when I checked the CSS file itself, it's named Style.css. While HTML isn't picky about case, sometimes servers like GitHub Pages are. So, if the names don't match exactly, it can cause problems.

To fix this, I'd suggest changing the CSS file name to style.css to match what's in the HTML. That way, everything lines up perfectly.

Also, if you want to rename the file directly within your Git repository, you can use the git mv command. It's a convenient way to rename files. Here's how you can do it:

Navigate to the directory where the CSS file is located in your terminal or command prompt.
Then, use the git mv command to rename the file. For example:

cd ./assets/css
git mv Style.css style.css

This will rename the file from Style.css to style.css in your repository. Once you commit and push these changes, they'll be reflected on GitHub Pages as well. If you prefer to do it manually, you can simply rename the file in your file explorer or text editor, and then push the changes to your repository.

Hope this helps clear things up! 🙌🏼

[lelisiario]

It didn't work. The live site is still wonky.

[NipulM]

Alright, I whipped up a quick solution, but I'm not sure if it's what you had in mind! 😅

I relocated the style.css file from the Assets folder to the root folder, and it seems to have done the trick. You can check out my profile to see for yourself—I created a repo and it's deployed!

The only adjustments I made were to the HTML file:

<link rel="stylesheet" type="text/css" href="style.css" />

And then I moved the CSS file (style.css) to the root folder. If any of this is unclear, feel free to take a peek at my repo for clarification!

Hopefully, this resolves the issue.

[lelisiario]

Thank you so much! This is immensely helpful! Could I ask you one final thing to delete this repo please? I'm not sure how the graders detect plagrism and they have a 0 plagrism policy. Do NOT want to get kicked for getting help!

Thanks again!

[NipulM]

Yeah sure thing!

[lelisiario]

Thank you again! This was very helpful!