I have problems with "Build a Personal Portfolio Webpage "

1

Hello, web dev,
I hope you are well and having a nice day.
For me, it is not, because I can’t figure out a problem with the positioning of some elements. I am currently trying to solve the final project od HTML and CSS course here in freeCodeCamp, which is “Build a Personal Portfolio Webpage” (here is the link: https://codepen.io/freeCodeCamp/full/zNBOYG )

In the part of the website where we show the projects, you can inspect it using your browser to understand its layout ( it is a grid layout so: the items are the a tag elements). I have done the same layout and even values but I don’t get the same height for the

element :

chrome_ZZgxSF7ZDq
chrome_ZZgxSF7ZDq800×330 107 KB

my HTML code :

<a target="_blank" href="" class="img-container project-tile">
       <img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="project image">
       <p class="img-caption"> Tribbute Page </p>
</a>

and my CSS is :

.project-tile {

}
.img-container {
	display: block;
	margin:0;
	background: #323437; 
	text-decoration: none;
}
.img-container img {
	height: calc(100% - 6.8rem);
	width: 100%;
	object-fit: cover;
}
.img-caption {
	margin: 0;
	font-size: 1.2rem;
	padding:1rem 0.5rem;
	color: white;
}

instead in the original website they have the same height:

brave_o8NPTtdQ2T
brave_o8NPTtdQ2T840×408 148 KB

2

Hi ilovehacking92,

Its been a year since you posted this. But, just wanted to share a possible solution. Your HTML code with the part should have a “class” on it.

The solution: <img class = “img” src = “link”. That way, the grids will be aligned accordingly, I think

Hopefully, it helps

2 Likes