Was searching about your issue and came across this.
Its me, I’ve been limited on a new account for sending too many messages…
Also seen this,
I’ve tried this test thing on codepen as well pasted my project and it should have passed
I am editing my answer here.
I think an easier solution would be to just apply the freeCodeCamp tests to the img you have towards the top of the page and then for the other images at the bottom you can use whatever styles you want there.
<div class="column-image">
<figure id="img-div">
<img id="image" src="/img/Kanye.jpg" />
<figcaption id="img-caption">Kanye West</figcaption>
</figure>
</div>
Remove the image, img-caption and img-div ids here
With those HTML changes, you shouldn’t need to touch your CSS at all and pass the tests
please post your full code (html & css) with those new changes
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.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
It looks like you are only centering the image under this media query here
@media screen and (max-width: 1000px) {
.column-header,
.column-image {
width: 100%;
float: none;
}
#image-div img {
margin: auto;
}
}
I would make sure that the image is centered for all devices.
That could be messing with the tests too.
When I made that change, it consistently passed for me
I double checked and I got a bunch more errors, I’m kind of lost after all these alterations
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<meta http-equiv="Page" content="text/html; charset=UTF-8" />
<title>Tribute Page</title>
</head>
<body>
<main id="main">
<nav>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#tribute-info">Biography</a>
</li>
<li>
<a href="#albums">Top Albums</a>
</li>
<li>
<a href="#sources">Sources</a>
</li>
</ul>
</nav>
<section aclass="first-row" id="home">
<div class="container">
<div class="column-header">
<h1 id="title">Kanye West</h1>
<p id="sub-header">an American rapper</p>
<div>
<p>
Born in Atlanta and raised in Chicago,[5][6] West gained recognition as a producer
for Roc-A-Fella Records in the early 2000s, producing singles for several artists
and developing the "chipmunk soul" sampling style. Intent on pursuing a solo career
as a rapper, he released his debut studio album, The College Dropout (2004), to critical
and commercial success.
graduated in 2011.
</p>
</div>
</div>
<div class="column-image">
<figcaption id="image-div">
<img src="/img/Kanye.jpg"/>
</figcaption id="img-caption">Kanye West</figcaption>
</figure>
</div>
</section>
<section class="second-row" id="tribute-info">
<article>
<h2>Biography</h2>
<p>
West was born on June 8, 1977, in Atlanta, Georgia.[b] After his parents divorced when he was three years old, he moved with his mother to Chicago, Illinois.[23][24] His father, Ray West, is a former Black Panther and was one of the first black photojournalists at The Atlanta Journal-Constitution. Ray later became a Christian counselor,[24] and in 2006, opened the Good Water Store and Café in Lexington Park, Maryland, with startup capital from his son.[25][26] West's mother, Donda C. West (née Williams),[27] was a professor of English at Clark Atlanta University and the Chair of the English Department at Chicago State University before retiring to serve as his manager.
</p>
<p>
West began his early production career in the mid-1990s, creating beats primarily for burgeoning local artists around his area. His first official production credits came at nineteen when he produced eight tracks on Down to Earth, the 1996 debut album of a Chicago rapper, Grav.
</p>
<p></p>
<p></p>
<p></p>
<p></p>
</article>
</section>
<section class="third-row">
<blockquote>
<p id="quote">
“I refuse to accept other people's ideas of happiness for me. As if there's a "one size fits all" standard for happiness”
</p>
</blockquote>
</section>
<!-- Gallery -->
<section class="fourth-row" id="albums">
<h2>Best Albums</h2>
<figure class="img-container">
<img
class="project-image"
src="img/dropout.jpg"
alt="College Dropout"
/>
<figcaption class="caption">
<p class="name-caption">The College Dropout</p>
<p class="date-caption">2004</p>
<ul>
<li>
<a
href="https://music.youtube.com/playlist?list=OLAK5uy_mDFKFAtmr5gFhZnDVfUFFgoYK9dpY4ml0"
>YouTube Music</a>
</li>
</ul>
</figcaption>
</figure>
<figure class="img-container">
<img
class="project-image"
src="img/fatnasy.jpg"
alt="My Beautiful Dark Twisted Fantasy"
/>
<figcaption class="caption">
<p class="name-caption">My Beautiful Dark Twisted Fantasy</p>
<p class="date-caption">2010</p>
<ul>
<li>
<a
href="https://music.youtube.com/playlist?list=OLAK5uy_lh6e__g89bgNq1BF7EM9GMlXMLzwvatgA"
id="tribute-link" target="_blank"
>YouTube Music</a
>
</li>
</ul>
</figcaption>
</figure>
</section>
<section class="fifth-row" id="sources">
<h2>Sources</h2>
<ul>
<li>
<a href="https://kanye2020.country/" target="_blank"
>Kanye.com</a
>
<section class="footer">
<p>Design & Development - Szabolcs Nagy</p>
</section>
</main>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
overflow-x: hidden;
}
html {
font-size: 10px;
scroll-behavior: smooth;
}
body {
font-family: 'Lato', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
font-size: 1.6rem;
line-height: 1.5;
margin: 0;
background-color: #f3ecea;
color: #37383a;
}
a:link {
text-decoration: none;
}
@media (min-width: 1400px) {
body {
font-size: 2.5rem;
line-height: 1.8;
}
}
h1 {
font-size: 6rem;
font-family: 'Libre Baskerville', serif;
font-weight: bold;
}
#sub-header {
font-weight: 300;
color: #9f9f9f;
text-transform: uppercase;
}
@media (max-width: 400px) {
h1 {
font-size: 4rem;
}
}
@media (min-width: 1400px) {
h1 {
font-size: 7rem;
}
}
h2 {
font-size: 3rem;
font-family: 'Libre Baskerville', serif;
text-align: center;
padding-bottom: 5rem;
}
@media (min-width: 1400px) {
h2 {
font-size: 4rem;
}
}
blockquote {
font-size: 2rem;
font-style: italic;
font-family: 'Libre Baskerville', serif;
text-align: center;
margin-bottom: 1rem;
}
@media (min-width: 1400px) {
blockquote {
font-size: 3rem;
}
}
nav {
background-color: #37383a;
width: 100%;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
padding-top: 0.5rem;
padding-bottom: 0rem;
z-index: 8;
}
nav ul li {
list-style-type: none;
display: inline-block;
}
nav ul form {
display: inline-block;
}
nav ul li a {
color: #fbfaf8;
text-decoration: none;
font-size: 24px;
font-weight: bold;
padding: 10px 20px;
transition: 0.2s;
}
nav ul li a:hover {
transition: 0.3s;
color: bisque;
}
ul {
list-style: none;
padding-left: 0;
line-height: 2;
}
#tribute-link {
font-weight: 500;
color: #fefefe;
text-transform: uppercase;
line-height: 2;
}
#tribute-link:visited {
color: #fefefe;
}
#tribute-link:hover {
text-decoration: none;
}
#tribute-link-dash {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
display: block;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
border-radius: 6px;
}
figure img {
position: relative;
transition: 0.3s;
}
.caption p {
font-family: 'Courier New', Courier;
text-transform: uppercase;
}
.caption p {
font-family: 'Courier New', Courier;
text-transform: uppercase;
color: white;
font-size: 18px;
font-weight: bold;
}
.caption li a {
font-family: 'Courier New', Courier;
text-transform: uppercase;
color: white;
font-size: 16px;
}
.caption li {
line-height: 1.7rem;
}
.img-container {
object-fit: contain;
transition: 0.4s;
position: relative;
z-index: 0;
max-width: 100%;
max-height: 100%;
}
.img-container:hover > img {
transition: 0.4s;
opacity: 20%;
z-index: 0;
}
.img-container:hover > .caption {
z-index: 1;
transition: 0.4s;
}
.caption {
padding-top: 1.2rem;
font-family: 'Libre Baskerville', serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: default;
z-index: -1;
}
.date-caption {
font-size: 1rem;
font-style: italic;
position: relative;
top: -1rem;
}
.name-caption {
font-size: 1.5rem;
font-weight: bold;
}
@media (min-width: 1400px) {
.date-caption {
font-size: 1.5rem;
}
.name-caption {
font-size: 2rem;
}
}
.column-header {
float: left;
width: 65%;
padding: 2.5%;
box-sizing: border-box;
}
.column-image {
float: left;
padding: 2.5%;
width: 35%;
box-sizing: border-box;
}
.container::after {
content: '';
display: table;
clear: both;
}
@media screen and (max-width: 1000px) {
.column-header,
.column-image {
width: 100%;
float: none;
}
#image-div img {
margin: auto;
}
}
.first-row {
padding: 12rem 5rem 5rem 5rem;
top: 0;
}
.second-row {
color: #37383a;
padding: 0 5rem 4rem 5rem;
margin-bottom: 5rem;
}
.third-row {
background-color: #37383a;
color: #fefefe;
padding: 5rem;
text-align: center;
}
.fourth-row {
margin-top: 10rem;
background-color: #333;
overflow: auto;
white-space: nowrap;
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
padding-left: 3rem;
width: 100%;
}
.fourth-row h2 {
font-family: 'Lato', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
position: absolute;
text-align: left;
margin-left: 5rem;
width: 100%;
}
.fourth-row figure {
margin-top: 10rem;
background-color: #333;
overflow: auto;
white-space: nowrap;
display: inline-block;
color: white;
text-align: center;
padding: 0rem 5rem 1rem 5rem;
text-decoration: none;
}
.fourth-row figure img {
object-fit: contain;
width: 390px;
height: 390px;
border-radius: 10px;
}
.fifth-row {
padding: 4rem;
text-align: center;
margin-bottom: 6rem;
}
.footer {
background-color: #37383a;
color: #fefefe;
padding: 0.2rem;
text-align: center;
}
#sources h2 {
font-family: 'Lato', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
#sources ul li {
line-height: 3.6rem;
}
@media screen and (max-width: 600px) {
nav ul li a {
font-size: 19px;
}
p {
font-size: 18px;
}
#quote {
font-size: 24px;
}
#sources ul li a {
font-size: 18px;
}
}
@media screen and (max-width: 1000px) {
p {
font-size: 18px;
}
#quote {
font-size: 24px;
}
#sources ul li a {
font-size: 18px;
}
}
@media screen and (max-width: 1400px) {
p {
font-size: 21px;
}
#quote {
font-size: 28px;
}
#sources ul li a {
font-size: 24px;
}
}
@media screen and (max-width: 500px) {
p {
font-size: 24px;
}
#quote {
font-size: 28px;
}
#sources ul li a {
font-size: 24px;
}
}
It looks like you have accidentally introduced some errors here with incorrect HTML syntax.
For example you have an opening figcaption here when it should be an opening figure tag.
It looks like we accidentally have two closing figcaptions here
Also we want that to be the id of img-div not image-div
So you can copy what I wrote earlier here
Then for your CSS, remove the #image-div img selector from here
Right underneath your figure img selector you will need to add the #img-div img selector
figure img {
position: relative;
transition: 0.3s;
}
#img-div img {
margin: auto;
}
When I fix those errors it passes for me
I think it is fine to go off of a creative approach with this projects.
That is actually encouraged because then you will make it your own and learn a lot in the process.
I think the issue here is that you need to test more of your code earlier on to help some of these issues we found.
My suggestion would be to write the basic HTML and CSS and get the tests to pass, then write your additional code after everything passes.
Learning how to debug your code and eventually other people’s code, is an extremely valuable skill to have as a developer.
While it is frustrating now to deal with these errors, you are learning how to debug your own code.
If you can practice this skill of working through errors and debugging your code then it will put you in a great position when you start your first job as a developer.
When you are on the job, you will be working on bug fixes and trying to figure out why something isn’t working. Often times this will take hours to figure out.
But you will end up learning so much in the process and become a stronger developer because of it.
Good news is that you are close to passing these tests.
Once you clean up those things I mentioned earlier, then it will pass 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.