Responsive Web Design Projects - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

   **Hey I'm having trouble centering my image within its parent element. I've looked through the forum and seen a suggestion to  use margin: left auto; & margin: right auto; on the id attribute of the img element but it hasn't worked for me. I also have reverse engineered my problem by looking through successful FCC tribute page projects on Codepen and I still have been unable to center this image within its parent element. Any help is appreciated!**

/* file: index.html */
<!DOCTYPE html>
<html>
<main id="main" class="gold-background"> 
 <head>
  <link rel="stylesheet" href="styles.css"/>
   <title>A Tribute to Roberto Clemente </title> 
 </head>
<body>
 <h1 id= "title">Roberto Clemente</h1> 
  <h2 id="description">A Puerto Rican baseball hero</h2>
   <div id="img-div"> 
     <div id="orientation"> <img class="border" id="image" src="https://media.bleacherreport.com/f_auto,w_630,h_420,q_auto,c_fill/w_800,h_533,c_fill/br-img-images/001/659/987/young_crop_north.jpg" alt="Roberto Clemente holding a bat">
     <figcaption id="img-caption"><center><em>Roberto Clemente holding a bat.</em></center></figcaption> </div>
<section id="tribute-info">  
<ul class="list">
   <li id="bio"><b>1934</b> - Born in Carolina, Puerto Rico</li>
  
  <li><b>1952</b> - Professional baseball career began at the age of 18 for the Cangrejeros de Santurce, a team in the Puerto Rican Professional Baseball League</li>
  
  <li><b>1954</b> - Signed with the Brooklyn Dodger's Triple A team on February 19th of that year. </li>
    
  <li><b>1955</b> - On April 17th, Clemente debuted with the Pittsburgh Pirates in a double header against the Brooklyn Dodgers </li>

  <p><b><u>Philanthropic Endeavors</u></b></p>
  
  <li><b>1972</b> - On December 31st, Roberto Clemente died in an airplane crash en route to Nicaragua. Clemente was known for his philanthrophic efforts and Nicaragua had recently suffered a large earthquake.</li>
  
</ul>

 </div>
<div id="footer"> 
    <p>To read more about Roberto Clemente's life check out his <a href="https://en.wikipedia.org/wiki/Roberto_Clemente" target="_blank" id="tribute-link">Wikpedia Page</a></p>
  </section>  
 </div>
</body>
</main>
</html>

/* file: styles.css */

<style>

<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap"  rel="stylesheet" type="text/css">


#title {
 
 font-size: 10px;   
}

#main {
 max-width: 100%;
}

#image {
display: block; 
max-width: 100%;
 width: 100%;
  margin-left: auto;
  margin-right: auto;
  

}  

#orientation {
 margin: 0 auto;
 text-align: center;
}

#footer {
 margin-left: 400px;
 font-size: 20px;
 
 
}


.border{
 border-color: ghostwhite;
 border-width: 40px;
 border-style: solid;
 display: block;
 max-width: 100%

 
}

.gold-background {
 background-color: lightgoldenrodyellow;
 max-width: 100%	
}

h1 {
 font-size: 50px;
 margin-left: 480px;
 
}

h2 {
 font-size: 25px;
 margin-left: 500px;
 
}

.responsive-img: {
 max-width: 100%;
 height: auto;
}



ul {
 font-size: 20px;
 font-family:"Yusei Magic"
 
}



.list {
 padding: 10px;
 margin: 5px 10px;
 margin-bottom: 20px;
}



</style>


 

   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Responsive Web Design Projects - Build a Tribute Page

Link to the challenge:

2

Page is looking good.

Regarding your image, it appears you have two styles competing with each other. On your image, you have an id of image, and a class of border. This would mean that both your image selector and border selector will be applying styles to your image.

#image {
display: block; 
max-width: 100%;
 width: 100%;
  margin-left: auto;
  margin-right: auto;
}  

.border{
 border-color: ghostwhite;
 border-width: 40px;
 border-style: solid;
 display: block;
 max-width: 100%

So the reason things look weird is you’ve instructed your image to be the full width of the page in image, and you’ve also instructed it to have a 40px white border in border. Therefore, your image plus border is now wider than the rest of your page with a total width of 100% + 80px. So while your image is centered, its just too wide.

You could fix this several ways, making the image width not 100%, removing the white border, or other mixes of option. Another thing to consider is box-sizing.

Box sizing determines how items on your page are sized. When you make an item 100% you’d think that should be the full width… now if you add margins and padding and borders, the browser could either add to the width of the item, making it wider that 100%, or it could add the image, padding, borders, and margins in such a way that the total is 100%… the default method is the first way, called content-box… I hate that and its not very intuitive in my mind. The latter method is border-box, which I prefer… I change most of my pages to border-box, but lots of people like content-box as well… I always set box-sizing to border-box in the root of my page because I find that easier to work with.

Sorry, thats a lot. Hope this helps you get the image centered as you like:). Let us know if you have questions.

3

By the way, putting this at the top of your style sheet file sets box-sizing in the root of your page (* being the root selector), meaning it should apply to all sub-components of your page… you can also apply box-sizing to individual components if you want instead of the whole page… I’m not saying this is what you should do, and more experienced developers may have reasons to say you shouldn’t do this, but its what I do.

* {
  box-sizing: border-box;
}
4

This worked! Thanks for the help and the resource too. I never even knew that box sizing was a thing before this, really appreciate it. :handshake:

1 Like
5

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