DEV Community

Discussion on: CodePen isn't displaying correct colors

Collapse
misnina profile image
Nina • Edited on

I can reproduce your results on browser and codepen so it's not anything wrong with just your viewing.

Changing the padding on the body works, but none of the colors work at all.

Oh!

Okay so I can't tell you what the primary issue is, but if you add !important after your declarations that share the bootstrap names it'll work.

body {
    padding-top: 70px;
}

.flex {
    display: flex;
  flex-wrap: wrap;
}

.jumbotron {
    color: #2c3e50 !important;
    background-color: #ecf0f1 !important;
}

.navbar-inverse {
    background: #2c3e50 !important;
}

.navbar-inverse .navbar-brand {
    color: white !important;
}

.navbar-inverse .navbar-nav>li>a {
    color: white !important;
}

My guess it that in codepen the bootstrap coloring is being called after the css for the codepen, so it's overwriting your colors. Not entirely sure, but yeah.

Collapse
nataliecodes profile image
natalie stroud Author

Thanks Nina! :) It looks like it was something with the bootstrap library and specificity.