Looking for feedback on why my Tribute page code is failing the test

1

When I run the test on my Tribute page, I’m getting the following 2 errors:

#Content
5. Within the “img-div” element, I should see an element with a corresponding id=“img-caption” that contains textual content describing the image shown in “img-div”.

#Layout

  1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Here is a link to the forked Codepen site with my HTML and CSS: https://codepen.io/LINDGRENBA/pen/oaJOxv

Here is my HTML:

<body>
  <div id="main">
    <div id="top">
    <h1 id="title">Gemma & Pixie Project</h1>
    <p class="title">A love story</p>
    **<div id="img-div">**
**      <img id="image" src="https://i.postimg.cc/J0yHTTcq/gemmacrop300.png" alt="Gemma the dog asleep on the couch">**
**      <p id="img-caption">Gemma sleeps soundly next to her person on the couch.</p>**
**    </div><!--end of div img-div-->**
    </div><!--end of div top-->
    
  <div id="bottom" class="cf">
    <div id="bottom-left">
      <h2>Gemma</h2>
<p id="tribute-info">Gemma was adopted from Pixie Project, a not for profit rescue in Portland Oregon. The following are some fun facts about Gemma:</p>

<ul>
  <li><strong>Age:</strong> Two and a half years old.</li>
  <li><strong>Weight:</strong> 17 lbs, after the Vet called her a <q>tube</q> and put her on a doggie diet.</li>
  <li><strong>Favorite food:</strong> Anything. Literally anything. We caught her eating pieces of the doorstop off the carpet last night. She also likes to lick lint off the floor.</li>
  <li><strong>Best friend:</strong> Mr. Cronos, the dog who lives next door.</li>
</ul>
   </div><!--end of div bottom-left-->
    <div id="bottom-right">
      <h2>Pixie Project</h2>
  <p>
    Pixie Project takes in animals from nearby, overcrowded shelters in rural areas of Portland and from other states as well. Pixie offers <q> pet adoption services, pet owner education and support and low cost and free spay and neuter and veterinary services for homeless and low-income pet owners.</q> When you adopt an animal through Pixie Project there is a two week trial period, which gives you time to make sure that your new fuzzy friend is a good fit for your home... and that you are a good fit for them! If you're looking to adopt, <a id="tribute-link" href="https://www.pixieproject.org/category/dogs+adopt/" target="_blank">check out Pixie Project</a> to find your furry life partner.
  </p>
    </div> <!--end of div bottom-right -->
    </div> <!-- end of div bottom -->

    <footer>
      <p>&copy;Brittany Lindgren 2018         </p>
    </footer>
  </div> <!--end of div main-->
  
</body>

and my CSS:

body {
background-color: #F4DBD8; 
font-size: medium
}

h1 {
  font-size: 200%;
}

h2 {
  font-size: 150%;
}

p, li, footer, #img-caption {
  font-size: 110%;
  text-align: 
  font-family: 'Bellefair', serif;
}

ul {
  list-style-type: none;
}

footer {
  text-align: center;
  margin: 30px 0px;
}

.title {
  font-size: 130%;
}

h1, h2, .title {
  font-family: 'Pacifico', cursive !important;
}

#title, .title {
  text-align: center;
}

**#img-div {**
**  position: relative;**
**  width: 300px;**
**  height: 300px;**
**  margin-top: 200px;**
**  margin-bottom: 0;**
**  top: 50%;**
**  left: 50%;**
**  -webkit-transform: translate(-50%, -50%);**
**  -moz-transform: translate(-50%, -50%);**
**  -o-transform: translate(-50%, -50%);**
**  -ms-transform: translate(-50%, -50%);**
**  transform: translate(-50%, -50%);**
**}**

**#image {**
**  border-radius: 50%;**
**  width: 250px;**
**  height: 250px;**
**  max-width: 250px;**
**  border: 5px solid black;**
**  display: block;**
**  margin-left: auto;**
**  margin-right: auto;**
**}**

#img-caption {
  text-align: center;
  padding-top: 30px;
}

#top {
  width: 100%;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

@media (min-width: 850px) {
  #bottom-left {
  width: 40%;
  float: left;
  padding: 0px 30px 0px 30px;
}
  #bottom-right {
  width: 40%;
  float: right;
  padding: 0px 30px;
 }
}

Sorry that I’ve included so much code, but I wasn’t sure if maybe something I’m not considering is effecting my outcomes, so wanted to include as much detail as possible.

2

For the img-caption error it passed on my browser fine (Chrome).

for the img element error , you need to change the height and width for the image itself; there’s a clue in the test error message that may help.
(I had to go look at mine to see what I did lol).

3

Thanks Ducky. I’ll check it out.
-Britt

4

Got it! Thank you so much :grin:

1 Like