Hi! I'm new and could use some help. Could someone please explain why I got everything right in lesson 19 except the part about changing the thick border color green?

Hi! I'm new and could use some help. Could someone please explain why I got everything right in lesson 19 except the part about changing the thick border color green?
0

#1
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .smaller-image {
    width: 100px;
    thick-green border
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }
</style>
 
<h2 class="red-text">CatPhotoApp</h2>

<img class="smaller-image thick-green-border"src="https://bit.ly/fcc-relaxing-cat"alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

#2
  1. You have all of your border stuff inside your smaller-image class instead of declaring a new class.
  2. Look carefully at the name you used in the style sheet. You have a typo.

#3

code

heres everything you need to know


#4

let me know if your missing something


#5

Thanks for answering,

However, I’m still confused. Do you mean that I put the two img classes together in the .smaller-image section at the top
}

.smaller-image {
width: 100px;

.thick-green border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;

Do I also need to adjust more in the bottom part of the lesson or leave like below?
<img class="smaller-image thick-green-border"src="https://bit.ly/fcc-relaxing-cat"alt="A cute orange cat lying on its back. "> .

How do I separate the two img classes because I tried separating using above but lost the thick gray border that I had? What am I still doing wrong?

If you clarify, I would so appreciate it.


#6

If you want to have two separate class definitions, then you must have the format:

.classDefNum1 {
   someProperty1: value;
   someProperty2: value;
}

.classDefNum2 {
   someProperty1: value;
   someProperty2: value;
}

The point is they each have their own set of { and }. Your code was nesting the “thick-green-border” class inside the { } of the “smaller-image” class, which is not valid syntax.


#7

This is still confusing. I’m don’t remember anything like this. You’re saying that this is the code that I put like this:
above or below this:
}
.smaller-image {
width: 100px;
}

Please excuse me but would it be like this:

.classDefNum1 {
sameProperty1: small-image;
sameProperty2: width: 100px:
}
.classDefNum2 {
sameProperty1: thick-green border {
same Property2: width: 10px-solid-radius: 50%;
}

Is this the only way to get a green border?


#8

no not necessarily
at your level this it the code

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
    </div>

let me know if you understand


#9

Hi,

Thank you for your kind email. However, I am completely confused to make it work this way. I did get it to work to turn the box green in a different way. I know that your code works, but I am totally stumped as how you did it this way.

Where did the container-fluid come in for this in lesson 19?

I can see dividing the original 16 twice for those two div class lines.

Believe it or not, I even am getting library books out trying to understand this coding. This all is so new to me, but I am trying my hardest. I know that I must seem like a complete idiot but what did you mean here? I keep trying to go over it, but the more that I try, the more I lost I get.


#10

Can you please post the name of the challenge you are still stuck on? Also, can you post all of your code for this challenge that you most recently have tried? The previous poster appears to have been referencing a different challenge than the one your are on currently.

REMEMBER: When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#11

Hi Randall,

You helped me solve that particular lesson. I only went to that same solved lesson because I thought another person was trying to teach me another method to do the same thing. However, I had no idea at all as to how he or she came up with that solution. This is where I got so confused. I am so happy that you said this person was referencing another problem because I assumed I was a complete idiot.

Here’s the lesson that you helped me solve. I am in lesson 85 now. This is what I understand and it works to form the green border from lesson 19:

Thank you so much, Randall, for being so thoughtful.

<p>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }
  
  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }
  
  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</p>

#12

The challenges do not have lesson numbers. They have challenge names such as “Add Borders Around your Elements”. That is why I was asking you the challenge name. The number in the top right corner of the screen represents your brownie points.


#13

Got it! I’ll remember that for the future. You take care, Randall, and thanks again!