The css code don't work for thumbnail header btn

scss

#1

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


#2

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


#3

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


#4

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;
}

#5

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:


#6

works fine for the code you provided


#7

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?


#8

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


#9

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


#10

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


#11

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


#12

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:


#13

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