Tell us what’s happening:
I have been scratching my head and looking up ways in which this can be rectified, but to no avail. Within the class “entity-block”, the text will not wrap and the divider I created for each, including the background color (so everything within that class) does not get smaller as I make the screen smaller. Any help would be appreciated!
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Tribute Page Project" />
<link rel="stylesheet" href="styles.css" />
<link href="https://fonts.googleapis.com/css2?family=Aboreto&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap" rel="stylesheet">
<title id="title">Lara Croft (The Tomb Raider)</title>
</head>
<body>
<header>
<h1>Lara Croft (The Tomb Raider)</h1>
</header>
<main id="main">
<div id="img-div">
<img id="image" src="https://sm.ign.com/ign_ap/news/t/the-tomb-r/the-tomb-raider-reboot-trilogy-is-currently-free-on-pc-via-t_pa97.jpg" alt="A photo of Lara with a drawn fiery arrow." />
<div id="img-caption">Lara <em>loves</em> to explore tombs & the adventure that comes with it.</div>
</div>
</main>
<p class="intro">Most of us know and love the iconic character who was first introduced on the Playstation One. With that being said, below you'll find a timeline of all the Lara Croft entertainment through the years.</p>
<div id="tribute-info">
<div class="entity-block">
<span><strong>Tomb Raider</strong></span>
<span>1996</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">This is where it all started. In the first Tomb Raider game, an archaeologist and daughter to a rich aristocratic English family ventures across the world in search of the three mysterious Scion artifacts.</p>
</div>
<div class="entity-block">
<span><strong>Tomb Raider II</strong></span>
<span>1997</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">Lara Croft sets out on a quest for the Dagger of Xian, reputed to possess the power of the dragon.</p>
</div>
<div class="entity-block">
<span><strong>Tomb Raider III : Adventures of Lara Croft</strong></span>
<span>1998</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">Lara Croft goes on a quest from the jungles of India to the icy wastes of Antarctica for an ancient meteor rumored to have life-giving powers.</p>
</div>
<div class="entity-block">
<span><strong>Tomb Raider : The Last Revelation</strong></span>
<span>1999</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">Lara embarks on a journey of discovery across Egypt, where she must overcome the most ingenious puzzles and infernal traps ever devised, and face terrifying evil from beyond the grave.</p>
</div>
<div class="entity-block">
<span><strong>Tomb Raider : Chronicles </strong></span>
<span>2000</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">Four new adventures take Lara from the rooftops of a high tech city to the bowels of a German U-boat. Utilize new moves to overcome obstacles: tightrope walking, parallel bar swinging, and a hand-to-hand stealth attack.</p>
</div>
<div class="entity-block">
<span><strong>Lara Croft : Tomb Raider</strong></span>
<span>2001</span>
<span class="sm-text"><strong>Movie</strong></span>
<div class="divider"></div>
<p class="entity-description">Video game adventurer Lara Croft comes to life in a movie where she races against time and villains to recover powerful ancient artifacts.</p>
</div>
<div class="entity-block">
<span><strong>Tomb Raider : The Angel of Darkness</strong></span>
<span>2003</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">Accused of the murder of her former mentor, Von Croy, Lara becomes a fugitive on the run. To clear her name, Lara has no choice but to confront the secret alliance whose destiny it is to take over the world.</p>
</div>
<div class="entity-block">
<span><strong>Lara Croft Tomb Raider : The Cradle of Life</strong></span>
<span>2003</span>
<span class="sm-text"><strong>Movie</strong></span>
<div class="divider"></div>
<p class="entity-description">Adventurer Lara Croft goes on a quest to save the mythical Pandora's Box, before an evil scientist finds it, and recruits a former Marine turned mercenary to assist her.</p>
</div>
<div class="entity-block">
<span><strong>Tomb Raider : Legend</strong></span>
<span>2006</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">Lara Croft searches for the mythical sword Excalibur, racing across the world against her presumed dead friend.</p>
</div>
<div class="entity-block">
<span><strong>Tomb Raider : Anniversary</strong></span>
<span>2007</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">Lara Croft has been hired by a mysterious woman named Natla to find a lost and very powerful artifact known as the Scion.</p>
</div>
<div class="entity-block">
<span><strong>Tomb Raider : Underworld</strong></span>
<span>2008</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">Lara Croft continues in her search for her long lost mother in the legendary land of Avalon.</p>
</div>
<div class="entity-block">
<span><strong>Lara Croft and the Guardian of Light</strong></span>
<span>2010</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">While she is exploring a Mayan tomb, Lara Croft finds a magic relic, and suddenly is surrounded by bad guys. When an ancient Mayan demon, Xolotl, is released by mistake, Lara must survive the traps laid out by the demon.</p>
</div>
<div class="entity-block">
<span><strong>Tomb Raider</strong></span>
<span>2013</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">Armed with only the raw instincts and physical ability, experience Lara Croft's intense origin story from a young woman to a hardened survivor.</p>
</div>
<div class="entity-block">
<span><strong>Lara Croft and the Temple of Osiris </strong></span>
<span>2014</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">Deep in the deserts of Egypt Lara Croft joins forces with rival treasure hunter Carter Bell and imprisoned gods Isis and Horus, to defeat the evil deity Set.</p>
</div>
<div class="entity-block">
<span><strong> Rise of the Tomb Raider</strong></span>
<span>2015</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">Lara Croft continues her late father's research, trekking across Siberia in search of the answers her father couldn't find, facing off against an ancient and ruthless shadow organisation.</p>
</div>
<div class="entity-block">
<span><strong>Tomb Raider</strong></span>
<span>2018</span>
<span class="sm-text"><strong>Movie</strong></span>
<div class="divider"></div>
<p class="entity-description">Lara Croft (Alicia Vikander), the fiercely independent daughter of a missing adventurer, must push herself beyond her limits when she discovers the island where her father, Lord Richard Croft (Dominic West) disappeared.</p>
</div>
<div class="entity-block">
<span><strong>Shadow of the Tomb Raider</strong></span>
<span>2018</span>
<span class="sm-text"><strong>Video Game</strong></span>
<div class="divider"></div>
<p class="entity-description">As Lara Croft races to save the world from a Mayan apocalypse, she must become the Tomb Raider she is destined to be.</p>
</div>
</div>
</body>
</html>
html {
font-size: 10px;}
body {text-align: center;}
header {
background-color: rgba(0, 0, 0, 0.03);
height: 120px;
margin-top: 30px;
box-shadow: 15px 10px 30px 0 grey;}
h1 {
text-align: center;
font-family: Aboreto, sans-serif;
font-size: 3.5rem;
padding-top: 40px;}
#image {
background-color: rgba(0, 0, 0, 0.03);
padding: 20px 90px;
width: 65%;
height: auto;
max-width: 100%;
margin: 30px auto;
display: block;}
#img-caption {
font-size: 1.8rem;
text-align: center;
margin-top: -20px;}
#tribute-info {
font-family: Poppins, sans-serif;
font-size: 2.5rem;
margin: 80px auto;
width: 750px;
}
.intro {
font-family: Poppins, sans-serif;
font-size: 2.5rem;
margin: 40px 70px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.03);
border: 3px solid grey;}
.entity-block {
background-color: #09078065;
padding: 30px;
margin: 20px auto;
}
.entity-description {
font-size: 2.0rem;
padding: 15px;}
.sm-text {font-size: 1.5rem;}
.divider {border-bottom: 3px solid grey;}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge: