Image and bullet points on my tribute page

Image and bullet points on my tribute page
0.0 0

#1

Alright I’m currently doing the tribute page and I ran into 2 problems or maybe more if you notice any more. I don’t know what to do to make the picture relative/around same size as the white box behind it and I also don’t know how to make the bullet points align with the other writings above and below because it is a little too far on the right. If there’s anything else I’m doing wrong or got any tips to improve my skills please tell me.

My Tribute Page - https://codepen.io/TioW99/pen/OvVmYZ/

Example Tribute Page - https://codepen.io/freeCodeCamp/full/NNvBQW

HTML

<div class="box">
  <div class="title">
    <h1>Arnold Schwarzenegger</h1>
    <h3>The Man That Could Achieve Anything</h3>
  </div>
  <div class="image">
<img src="https://avatars.mds.yandex.net/get-pdb/51720/7d19acb9-b39f-44c6-ac29-5efcc155441f/s800">
    <p>Arnold at a competition</p>
  </div>
<h4>Here's what dreams Arnold achieved</h4>
<ul>
  <li>Dreamed of moving to America</li>
  <li>Dreamed of being the Best Bodybuilder</li>
  <li>Dreamed of being the Top Movie Star</li>
  <li>Dreamed of being the Govenor of California</li>
</ul>
<h4>"But what is most important is that you have to dig deep down, dig deep down and ask yourselves, who do you want to be? Not what, but who."</h4>
<p><i>- Arnold Schwarzenegger</i></p>
<h5>If you wish to know more about him, here's his <a href="#">Wikipedia</a> page.</h5>
</div>
<footer>Written and Coded by Me</footer>

CSS

body {
  background-color:lightgrey;
  margin-top:40px;
}

.box {
  background-color:grey;
  width:85%;
  margin-left:auto;
  margin-right:auto;
  border-radius:1%;
  padding:30px;
}

.title {
  text-align:center;
}

.image {
  background-color:white;
  padding:5px;
  border-radius:1%;
  border:1px solid lightgrey;
}

footer {
  margin-top:10px;
  margin-left:auto;
  margin-right:auto;
  border-top:3px solid black;
  width:85%;
  text-align:center;
}

#2

I’ll give ya a crash course in responsive images the pure css way :laughing:

Okay, so we can make a image both A.) fill its container and B.) be responsive by giving it 100% width and height and then controlling the size of it by its container element (I’m going by your current already set up classes):

.image {
    background-color: white;
    padding: 5px;
    border-radius: 1%;
    border: 1px solid lightgrey;
    max-width: 850px; /* here we set our maximum size for our container element, you can make this as wide as you want of course */
    margin: 0 auto; /* here we set the margins so our container is centered */
}

.image img{
    width: 100%; /* here both width and height are set to take up the available space of our container */
    height: 100%;
}

Now not only does our image fill its container, but as we shrink the browser window down, the image condenses along with the container.

Can you do this via bootstrap classes? Totally and you can check out this FCC guide on how to do it. But it doesn’t hurt to learn how to do it without frameworks before doing it with a framework.

Onto the bullet points. The thing about lists is that they by default have padding added to them which gives them their trademarked indented look. So we need to mess around with that styling. If we inspect the ul on your page, it looks like it has a built-in padding of 40px. Cutting that pixel amount in half lined it up with your other text content:

ul {
    padding-left: 20px;
}

#3

Thank-you for your answers and one more question but how do I get a rid of that big white gap under “Arnold at a competition”.


#4

That one is a pretty simple fix too. It’s another built in style but this time on the paragraph tag:

p {
  margin-bottom: 0px;
}

By the way, if you ever want to check out what’s going on live underneath the hood of any website, all you have to do is run the browser’s development tools on it. Take a look at this guide from MDN on how to do that. You’ll be able to click on elements in the code and see what styles are effecting them. You can also turn styles on and off by checking and unchecking them, see what margins, padding, and width are on them, tweak pixel, percent, em, etc amounts without the risk of messing up the actual code. It’s ridiculously handy for debugging a site you’re working on.

For example I used it to check out the p tag under your image, which is where I found the bottom margin causing that space underneath.