Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

My image cannot link with it’s div element, that it’s not responsive when I change screen size

Please help me with ideas on how to make it RESPONSIVE

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title id="title">Olivier Giroud "The Batman"</title>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="device-width, initial-scale=1.0">
  </head>
  <body>
    <main>
      <h1>The Great Olivier Giroud</h1>
      <p>The Man whose Arsenal Career will never be forgotten</p>
      <div id="img-div" class="img-container">
        <img id="image" src="https://imgresizer.eurosport.com/unsafe/1200x0/filters:format(jpeg)/origin-imgresizer.eurosport.com/2017/04/23/2068668-43368567-2560-1440.jpg">
        <p id="img-caption" class="img-caption">Olivier Giroud (FC Arsenal vs. Manchester City)</p>
      </div>
      <div id="tribute-info" class="tribute-info">
        <h2>Here are the great stuffs he did at Arsenal</h2>
        <ul>
          <li>On 26 June 2012, Arsenal won the race to sign Giroud on a long-term contract for a fee believed to be around £9.6 million (€12.4 million). He was given the number 12 shirt. He made his debut on 18 August as a substitute for fellow debutant Lukas Podolski in a goalless home draw against Sunderland in the Premier League and scored his first goal for Arsenal on 26 September, in a 6–1 win against Coventry City in the League Cup.</li> <br>
          <li>On 17 November, Giroud scored the third goal in Arsenal's 5–2 derby win over Tottenham. Four days later, Giroud assisted both Jack Wilshere's and Lukas Podolski's goals in Arsenal's 2–0 victory over former club Montpellier, which allowed Arsenal to qualify for the knockout stages of the tournament.</li><br>
          <li>On 30 January, Giroud scored as Arsenal fought back to earn a 2–2 draw, from 2–0 down at home to Liverpool. Giroud scored a header from a Wilshere free kick, and provided an assist for Theo Walcott. For January, Giroud was awarded with the Arsenal Fan's Player of the Month Award.</li> <br>
          <li>Giroud scored in the opening game of the Premier League season against Aston Villa, a 3–1 loss for Arsenal. His scored the only goal in the North London derby against Tottenham Hotspur on 1 September. </li> <br>
          <li>On 8 March 2014, Giroud scored twice against Everton in the FA Cup quarter-final, helping Arsenal to a 4–1 win. On 12 April, Giroud scored one of the penalties in the shootout against Wigan Athletic to send Arsenal to the final of the FA Cup at Wembley Stadium.</li>
        </ul>
        <h2>If you have time, you should read more about this incredible footballer on his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Olivier_Giroud" target="_blank">Wikipedia entry</a>.</h2>
      </div>
    </main>
  </body>
</html>

/* file: styles.css */
body {
  font-family: "roboto", sans-serif;
  font-size: 20px;
  color: #4C585B;
}

main {
  background-color: #EFF3EA;
  width: 100%;
  border-radius: 15px 15px 0px 0px;
  margin: 0;
  padding-top: 0px;
}

.img-container {
  background-color: white;
  width: 80%;
  margin: 0 auto;
  height: auto;
}

.img-container img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  padding: 30px;
  
}

.img-caption {
  font-style: italic;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  padding: 8px 0;
  font-size: 0.9em;
}

h1, p, h2 {
  text-align: center;
}

h1 {
  margin: 0;
  padding-top: 55px;
  
}

main p {
  margin: 0;
  padding: 20px 0;
  font-size: 0.8em;
}

.tribute-info {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;;
  align-items: center;
  margin: 0 auto;

}

ul {
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 1.2rem
}

h2 {
  font-size: 1.5rem;
  padding: 20px 0;
}

.tribute-info h2:last-child {
  font-size: 1.5rem;
  width: 80%;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

Within the img selector, add background-color:aqua
Observe what happens, the padding is shifting it out.

This is because content-box is the default setting. An earlier lesson taught to use a global selector to give the border-box property to all elements. Having that property within img selector works too.

1 Like
3

I have removed padding it now responds, but I wanted it to have space around the div

here is my current coode;

body {
  font-family: "roboto", sans-serif;
  font-size: 20px;
  color: #4C585B;
}

main {
  background-color: #EFF3EA;
  width: 100%;
  border-radius: 15px 15px 0px 0px;
  margin: 0;
  padding-top: 0px;
}

.img-container {
  background-color: white;
  width: 80%;
  margin: 0 auto;
  height: auto;
}

.img-container img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px auto;
  
}

.img-caption {
  font-style: italic;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  padding: 8px 0;
  font-size: 0.9em;
}

h1, p, h2 {
  text-align: center;
}

h1 {
  margin: 0;
  padding-top: 55px;
  
}

main p {
  margin: 0;
  padding: 20px 0;
  font-size: 0.8em;
}

.tribute-info {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;;
  align-items: center;
  margin: 0 auto;

}

ul {
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 1.2rem
}

h2 {
  font-size: 1.5rem;
  padding: 20px 0;
}

.tribute-info h2:last-child {
  font-size: 1.5rem;
  width: 80%;
}
4

The link above has an explanation of what box-sizing:border-box does. That is the needed property.

border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.

Without it, the img has defaulted to box-sizing:content-box

content-box gives you the default CSS box-sizing behavior. If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.

1 Like
5

Oh! thank you so much, I have tried it and it worked :100:

here is my final code:

body {
  font-family: "roboto", sans-serif;
  font-size: 20px;
  color: #4C585B;
}

main {
  background-color: #EFF3EA;
  width: 100%;
  border-radius: 15px 15px 0px 0px;
  margin: 0;
  padding-top: 0px;
}

.img-container {
  background-color: white;
  width: 80%;
  margin: 0 auto;
  height: auto;
}

.img-container img {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  margin: 10px auto;
  padding: 20px 20px 0 20px;
  
}

.img-caption {
  font-style: italic;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.9em;
}

h1, p, h2 {
  text-align: center;
}

h1 {
  margin: 0;
  padding-top: 55px;
  
}

main p {
  margin: 0;
  padding: 20px 0;
  font-size: 0.8em;
}

.tribute-info {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;;
  align-items: center;
  margin: 0 auto;

}

ul {
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 1.2rem
}

h2 {
  font-size: 1.5rem;
  padding: 20px 0;
}

.tribute-info h2:last-child {
  font-size: 1.5rem;
  width: 80%;
}
6

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

ooh thank you so much