[SOLVED] From Codepen to Atom: different results on browser

Hello everyone. I was starting to build my Portfolio page but first I thought it would be better to get familiar with Atom so I could be better with it in the future.

It happens I just tried to do a bootstrap navigation bar by default, but I can’t get it to change colors on CSS. It works correctly on Codepen but it doesn’t on my browser. Tried both on my desktop and laptop and the problem persists.

The code is EXACTLY the same: http://codepen.io/philzx/pen/LxmXWN

Are you loading Bootstrap? Have you linked your CSS file?

It’s exactly as shown on Codepen, so the answer is yes…

And you have your CSS file in the css folder, as specified by your link tag?

Yes. That’s correct.

There are only so many things that can possibly go wrong here. Check your browser console when you open your site and see what errors that gives you.

That’s the most weird part. No errors at all…

http://imgur.com/cdf61wz

Double check in network tab that bootstrap and css file loaded. Maybe try inlining your css with a style tag.

<html>
  <head>
    <style>
      // place your css here
    </style>
  </head>
  etc..

I could check css file isn’t loading. Not sure why since the path is right.

Using a style tag it works though.

What is your folder structure?

---project folder/
  ---index.html
  ---main.css

My structure is:

---project folder/
  ---css/
    ---style.css
  ---index.html

Maybe you’re loading your styles before you load Bootstrap. I see in your screenshot that you’re using Bootstrap but your navbar’s not colored (unlike in your codepen).

Did you copy your code into Codepen, or are you downloading it from Codepen?

You made a slight spelling error

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

Corrected

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

1 Like

Solved the problem with some help from one Facebook FCC Group user.

I had:

When it needed to be:

Thanks for your efforts.

2 Likes

Of course, those silly little mistakes :smiley:

This reminds me when I saved a html file as .txt and coudn’t make it work on browser for two days. Without thinking of googling.

1 Like