Bug in adding 2 classes at once

1

Tell us what’s happening:

I’m prettey sure it’s a bug. when I put both classes into the line, it only computes one of them. i.e. either the image is small either it gets the border, but not both at the same time.
checked out the spaces also! still didn’t work.
redone it a hundred times… :frowning:

Your code so far

<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-width: 10px;
    border-color: green;
    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>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/add-borders-around-your-elements

2

The whole list of classes should be wrapped in the same quotes. Everything between the quotes is what get’s assigned to the attribute on the left. In your code above class only knows about smaller-image.

1 Like
3

In other words:

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

should read:

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