Move title description under title

Want to move the tribute-info h2 element centered beneath title h1 element

First, you need to delete the extra " you have here:

<img id="image"  "

If you still want the image on the left of both the h1 and h2 elements and you still want the element with id=“top” to use display: flex, then you will can wrap the h1 and h2 elements in div element.

FYI - You have using justify-content: right for the title and tribute-info id selectors, but since neither have display: flex, nothing happens. I think you may want to add justify-content: center to your top id selector.

1 Like

I think I’ve done what you suggested, but it didn’t seem to do anything. Is there something I did wrong, or mis-read your suggestion?

I looked at your pen just now and do not see any difference that it was before with respect to the HTML section.

Not sure what needs to be done to the HTML section. I only made changes you suggested to the Style elements. The h1 and h2 elements are inside the div element already, are they not?

you did not fix this, for example, and this is in the html part

1 Like

Try nesting your h1 and h2 tags in a new div (say with an id of tribute-headers) then give that div the css properties below:

#tribute-headers {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Your html will then be:

<div id="tribute-headers">
    <h1 id="title">Elliott Smith</h1>
    <h2 id="tribute-info">Chronology of independent singer/songwriter</h2>
</div>

Finally, do address the issue with the extra " highlighted by others in your <img>.

1 Like

At this point, it might be good to explain exactly where you are trying to position all of the various elements in relation to each other. You also need to think about what you want to see on a smaller screen vs. large screen. How do you want things to layout differently in those situations?

I suppose the Title and Subtitle would have to go above the image, in a smaller screen scenario. And the bullet-points would merely have to be wrap-arounds. My next big thing is wanting to create a button, similar to the Submit button, but one that takes the user to another website. Not sure how to do that.