Tribute page "Your #img-caption should not be empty."

HTML-CSS
1

Hi,

I have a problem with my tribute page. I cannot determine how to fix the error " Your #img-caption should not be empty." I have searched for similar errors on the forum, but nothing worked for me. I have determined that when I deleted class=“cModal” from the second div element, the error disappears and my tribute page is accepted. I’d like to understand why. Could someone please help me?
I have added extracts of my HTML and CSS codes.

<div id="content">
        <section id="Who">
            <a href="#p1modal">
                <h3>Who?</h3>
                <div class="cModal" id="p1modal">
                    <p>Text <em>text</em>text. </p>
                    <figure id="img-div">
                        <img 
                        id="image" 
                        src="https://url"
                        alt="Aerial view."> 
                        <figcaption id="img-caption">
                         Text for the figure caption.
                        </figcaption>
                    </figure>
                </div>
            </a>
        </section>
</div>

#content {
  margin: 2vw 2vw 2vw 2vw;
  padding: 1vw 1vw 1vw 1vw;
  display: grid;
  grid-template-columns: 46vw 46vw;
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
  grid-template-rows: auto auto;
  grid-template-areas:
    "Who Dates"
    "Famous Famous";
  min-height: 50vw;
  font-size: 1.5vw;
}

#Who {
  grid-area: Who;
  height: 45vw;
}

.cModal {
  visibility: hidden;
  position: relative;
}

.cModal:target {
  visibility: visible;
}

.cModal p {
  position: relative;
  overflow: hidden;
}

#image {
  max-width: 100%;
  width: 43vw;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 2%;
}
2

As you can see all your elements shown here are positioned within the div element with a class set to the value of “cModal”. This is the ‘parent’ element. The others are ‘child’ elements. The .cModal class is set to be hidden in your CSS code. A parent is “elder” than a child. That is why you can not see the elements underneath the word “Who”.

3

Thank you very much for your help!

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.