Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

I can’t figure out how to keep my figcaption aligned with image during resize. It’s fine when shrinking but, it doesn’t stay in place when viewport is increased. I’ve been searching for quite awhile and wasn’t able to find an answer. The closest thing I found said to do display: relative: but, that didn’t work. I thought it might be a flexbox thing but, I couldn’t find anything about it. It’s not part of project, however, I would like to know how to do it.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" content="width=device-with, initial-scale=1.0">
    <link rel="stylesheets" href="styles.css">
    <title id="title">Tribute page to Stephen King</title>
  </head>
  <body>
    <header><h1>Stephen King</h1>
    <p>Legend of modern day horror</p>
    </header>
    <hr>
    <main id="main">
      <div>
        <figure id="img-div">
          <img src="https://tse3.mm.bing.net/th?id=OIP.zrgaHwDAggOKQu11-EjHngHaEk&pid=Api" alt="Stephen King with sinister smile"/ id="skimage" class="skpic">
          <figcaption id="img-caption">source: www.geekmi.news</figcaption>
        </figure>
      </div>
      <hr>
    </main>
  </body>


/* file: styles.css */
@media (prefers-reduced-motion: no-preference){* {scroll-behavior:smooth;}}
header {text-align:center;width:100%; font-size:25px;font-family:fantasy,impact;background-color:black;color:red}
hr {height:2px; background-color:red; border-color:red;}
.skpic {display:block; margin-left:auto; margin-right:auto;max-width:100%;height:auto;}
figcaption {}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36 OPR/109.0.0.0

Challenge Information:

Tribute Page - Build a Tribute Page

2

here are examples of what I mean.

Screenshot 2024-06-10 045533
Screenshot 2024-06-10 045533652×927 134 KB

Screenshot 2024-06-10 045602
Screenshot 2024-06-10 0456021377×915 87.4 KB

1 Like
3

hi there!
that is the wrong code. relative value should have the property position.

position: relative;

display needs only block and none value;
position needs absolute, relative, fixed and sticky values.

4

Thanks for the reply. Unfortunately none of those values accomplish what I’m trying to do. The caption still moves out of line when enlarging the viewport.

5

Thanks. I finally figured it out. I needed to apply a table value for the display on the figure element and then apply a table-caption value to display in the figcaption as well as set caption-side to bottom.

1 Like
6

I also applied the margins into the figure which allowed me to remove the class selector for the image ( .skpic).

7

can you post your updated code if you are having issues still?

8

I’m no longer having issues. I was able to get it to work and I already completed it and submitted it. I have the txt file if you would like to see it. I hate to admit it but, I spent close to 2 hours trying to find the solution even though it wasn’t a required part of the project. But, I just wasn’t able to let it go. And I had to put .skpic selector back in because the project required things that had to be applied specifically to that.

9

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