Bringing bullet list down below title and image

HTML-CSS
1

I finally found a way to align image with title. But, now I cannot figure a way to put my bullet list underneath it all. It just places it right next to the title and image. I tried using the flex-wrap feature, to create a new row for it. But, that didn’t work.

2

Hello half…

There are many mistakes (HTML syntax) in your code. Sift through it, and close off tags that need to be closed off, re-order tags that need to be reordered.

This is what I did as a quick fix:

<link href="https://fonts.googleapis.com/css?family=Indie Flower" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Permanent Marker" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter&display=swap" rel="stylesheet">
<style>
  * {
    margin: 0px;
  }
  #main {
    width: 100%;
  }
  #top{
     background-color: gray;
     display: flex;
    padding-bottom: 0px;
 }
  #title{
     font-family: Permanent Marker;
     font-size: 5rem;
     justify-content: right;
     padding: 85px 30px 150px 100px
 }
  #image{
     padding: 20px 20px 20px 20px;
     border-color: gray;
     border-width: 10px;
     border-style: solid;
     border-radius: 60%;
     justify-content: left;
}
  #img-caption{
     background-color: grey;
     color: white; 
     font-family: Indie Flower;
     font-size: 15px;
     padding: 0px 1px 1px 35px;
    margin: 0px;
  }
    #bullets{
      font-family: Architects Daughter;
      font-size: 30px;      
      
    }
  
</style>

<main id="main" >
  <div id="top">
    <img id="image" src="https://res.cloudinary.com/dgxqbvbdv/image/upload/v1576072340/First%20Project/Elliott_Smith_nh4inw.jpg" alt="Elliott Smith staring out a window">
    <h1 id="title">Elliott Smith</h1></img>
  </div>
<p id="img-caption"> "I didn't have a hard time making it, I had a hard time letting it go"</p>
  <ul id="bullets">
    <li>August 6, 1969 - born Steven Paul Smith in Omaha, Nebraska</li>
  </ul>                                   
</main>

Hope this helps

1 Like
3

Yes! That did help! Thank you very much!

4