Need help with my tribute page please

I am having trouble with the boxes in my tribute page. I want them to automatically fit to the screen but I’ve run out of ideas to fix it. https://codepen.io/DeOnnaGray/pen/paXrMj?editors=1000

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

Can you explain what you want to look different exactly? Give us much detail about the location of the problem area and what you want it to look like instead.

Thank you for that. I was struggling lol. When I change the width of the webpage the text at the bottom does not stay inside the boxes I created and everything started to overlap. I want the text to remain inside the boxes.

The first thing I notice which is causing a slight text alignment issue of the paragraph starting with “As inheritors of the discipline, pride, and …” is that you did not close the <ul> Instead, you put another ul element. Fix that first.

I see you are using Bootstrap4 syntax, but I do not see where you loaded Bootstrap into your head element. Are you wanting to use Bootstrap 4 in your project?

As far as the boxes not containing your text content, the culprit is your fixed height of 1700px on both the fluid-container div and the innerBox div. Comment those out and you will see that issue resolved.

Thank you! That helped a lot. Yes, I was attempting to use bootstrap but its my first time so I probably am missing something. Here is what I have now…

<head>
  <title>The Black Panther Party</title>
  <style>
        
    .container-fluid{
      padding:30px;
      background:white; 
      
    }
    
    .innerBox{
      border-radius: 5px;
      padding:30px;
      background: #E5DFDE;
      font-size; 40px
    
    }
    
    .pictureBox{
      border-radius: 5px;
      height: 555px;
      padding:30px;
      margin-bottom;300px;
      background:white;
      text-align:center;
     
    }
   
  
  </style>
</head>
<body>
  
  <class="container-fluid">
    <div class="innerBox">
      <div class="row">
        <div class="col-xs-12">
     
      <h1><center>The Black Panther Party</center></h1>
      <h2><em><center>A Brief History</center></em></h2>
 <div class="pictureBox">
<img src="https://images-na.ssl-images-amazon.com/images/I/61dK9zOrO4L.jpg">
   
      <p>The Black Panther Party Poster Print by Wishum Gregory</p> 
    </div>
  <br>
      <br>
  <h3>Here is a timeline of the Black Panther Movement:</h3>
  
  <ul>
    <li><strong>1966</strong> - Bobby Seale and Huey Newton founded the political orgainization Black Panther Party for Self-Defense as it was originally called. The party was formed in responsed to police brutality and the original focus was to take up arms and to keep a watchful eye on Oakland police.</li>
    <li><strong>1967</strong> - Co-Founder Huey Newton allegedly killed a police officer, John Frey.The Federal Bureau of Investigation (FBI) directs its program "COINTELPRO" to "neutralize" what they call "black nationalist hate groups". </li>
    <li><strong>1968</strong> - Eldridge Cleaver's Soul on Ice is published. Martin Luther King is assassinated. Riots break out nationwide. A team of Panthers led by Eldridge Cleaver ambushes Oakland police officers. Panther Bobby Hutton is killed.</li>
    <li><strong>1969</strong> - Community and social programs became a core of the party, including Free Breakfast for Children Program and community health clinics.</li>
    <li><strong>1970</strong> - Huey Newton's conviction is overturned in May 1970, but he remains incarcerated until August 1970. Newton tells The New York Times that "we've never advocated violence".</li>
    <li><strong>1971</strong> - A fall-out between Newton and Cleaver ensues after they argue during a live broadcast link-up. the Newton and Cleaver factions engage in retaliatory assassinations of each other's members, resulting in the deaths of four people. Nationally, hundreds of Party members quit the BPP.</li>
    <li><strong>1972</strong> - Newton shuts down chapters around the country, and calls the key members to Oakland. BPP members or supporters win a number of minor offices in the Oakland city elections.</li>
    <li><strong>1973</strong> - The BPP focuses nearly all of its resources on winning political power in the Oakland city government. Seale runs for mayor; Elaine Brown runs for city council. Both lose, and many Party members resign after the losses.</li>
    <li><strong>1974</strong> - Newton embarks on a major purge, expelling Bobby and John Seale, David and June Hilliard, Robert Bay, and numerous other top party leaders. Dozens of other Panthers loyal to Seale resigned or deserted. Newton murders Kathleen Smith, a teenage prostitute. He flees to Cuba. Elaine Brown takes over the leadership in his absence. Accountant Betty van Patter is murdered, after threatening to disclose irregularities in the Party's finances.</li>
    <li><strong>1977</strong>
   
    
  </ul>
    <br>
    <p>As inheritors of the discipline, pride, and calm self-assurance preached by Malcolm X, the Panthers became national heroes in black communities by infusing abstract nationalism with street toughness—by joining the rhythms of black working-class youth culture to the interracial élan and effervescence of Bay Area New Left politics ... In 1966, the Panthers defined Oakland's ghetto as a territory, the police as interlopers, and the Panther mission as the defense of community. The Panthers' famous "policing the police" drew attention to the spatial remove that White Americans enjoyed from the police brutality that had come to characterize life in black urban communities.</p>
     <p><em>-Author Jama Lazerow</em></p>
          <br>
    
  <h4>If you would like more information on the history of the Black Panthers and the Black Panther movement, visit the
    <a href="https://en.wikipedia.org/wiki/Black_Panther_Party">Wikipedia Page.</a>
    </h4>
    
      <p><center>Source: Black Panther Party. (2018, March 05). Retrieved March 10, 2018, from https://en.wikipedia.org/wiki/Black_Panther_Party</a></center></p>
    </div>
        </div>
      </div>
</div>

    <p><center>Coded by DeOnna Gray<center></p>
      
</body>

What you did is fine although I would recommend a couple of changes.
Just the way codepen works you have separate areas for your CSS, HTML and JS code.
Therefore you don’t need the <style> defenition inside the HTML.
You also don’t need <head> section. This is added for you automatically. Debug and view source of your page to see the actually output.

For centering text, instead of using the <center> tag use in CSS { text-align: center; } as a CSS rule on the elements you want to apply it to.

Hey, thank you for the feedback. Following the rules for the tribute page everything has to be in the HTML section, the only exception being the line of code that he explained had to be put in CSS so our link would work correctly. This information is good to know though for future exercises so thank you!

1 Like

Where did you read about these rules?

I am unaware of anything written in the project instructions or User Stories for this or any other project which says everything has to be in the HTML section. You are allowed to build your projects using whatever libraries and code you want and structure them them however you want as long as you meet the requirements specified in the User Stories.

In general, you almost always want to separate your HTML, CSS, and JavaScript. The CSS and JavaScript would be in separate files and would be imported into the HTML file. This keeps things much more organized. In Codepen, it is no coincidence that there are separate HTML, CSS, and JS modules.

At the 3:30 mark in the video of how to make the tribute page he says that everything should be in the HTML section aside from the code he shows to put in the CSS section. https://www.freecodecamp.org/challenges/build-a-tribute-page

That is because he only used Bootstrap which is just specialized css classes being applied to the html elements. The only additional styling was handled in the CSS module. He definitely did not use the style tag in his html. You should be putting all of those css classes inside the CSS module as he did.

Okay, will do. Thank you!