The css code don't work for thumbnail header btn

Hi there,

I’m trying to style the thumbnail header btn, but it doesn’t work. Here are my html

 <row>
		<a class="col-md-6 project", target="_blank", href="http://www.edoss.fr/">
			<div class="thumbnail-header">
				<div class="thumbnail-header-btn"></div>
				<div class="thumbnail-header-btn"></div>
				<div class="thumbnail-header-btn"></div>
			</div>
			<div class="thumbnail">
				<%= image_tag 'edoss1.png', alt:'http://www.edoss.fr/ - portfolio ehab elia - dev&co' %>
			</div>
		</a>
		<a class="col-md-6 project" href="https://hipme.herokuapp.com/">
			<div class="thumbnail-header">
				<div class="thumbnail-header-btn"></div>
				<div class="thumbnail-header-btn"></div>
				<div class="thumbnail-header-btn"></div>
			</div>
			<div class="thumbnail">
				<%= image_tag 'hipme1.png', alt:'https://hipme.herokuapp.com/ - portfolio ehab elia - dev&co' %>
			</div>
		</a>
	</row>

and here are my css code

.thumbnail-header {
    background-color: #eaeff4;
    display: block;
    height: 20px;
    width: 75%;
    text-align: center;
   .thumbnail-header-btn {
	    background-color: black;
	    border-radius: 100%;
	    float: left;
	    height: 10px;
	    margin: 5px 0px 0px 5px;
	    width: 10px;
	}
}

In the other hand, when I copy past the .thumbnail-header-btn directly in the browser, its work.
Thanks in advance

your .thumbnail-header is missing its closing curly bracket (}), i moved the topic to projects, if it is incorrect, please let me know, i will move it to the right place on the forum

no, it’s not. It’s in the last line.

Then it is at the wrong place, you can’t nest css selectors like that, it should be:

.thumbnail-header {
    background-color: #eaeff4;
    display: block;
    height: 20px;
    width: 75%;
    text-align: center;
}
.thumbnail-header-btn {
    background-color: black;
    border-radius: 100%;
    float: left;
    height: 10px;
    margin: 5px 0px 0px 5px;
    width: 10px;
}

In fact, I put all the css class code of my portfolio page inside .portfolio {}. Till now, it worked. Anyhow, I did what you said and put the selectors separetely… still doesn’t work :frowning:

works fine for the code you provided

This what drive me crazy. When I check the element in the browser, the code of the thumbnail-header-btn don’t even appear. What should I do?

Are you pro? If you are, ask your advisor. Well, if it isn’t there, something might be wrong with your code

No, I"m learning by my own. Thanks for your answers anyway

In fact, I’m working on the codecademy/Pro portfolio to perfectionnante my coding level. I’m new in this world :smile:

perfecting your code will take years, but codecademy (and pro even more) is a really good first step. Happy coding :slight_smile:

Thanks. Do you know where could I check where the problem is ? my scss sheet is connected, all my code is appearing in the browser except the .thumbnail-headr-btn code :triumph:

No idea, there is a css checker here, but that won’t work for scss, ah with scss you can do nesting. I don’t know scss, here ends what i can do for you