Need help with Personal Portfolio

HTML-CSS
1

Hi,

I am almost done with my Personal Portfolio. However, for some reason, there is a small gap between the img of Codepen and the title:

image
image774×690 69.2 KB

I have tried removing the top and bottom margins of the image and the project title (as shown below) but the gap is still there. Can someone advise me what did I do wrong?

.project-img {
width: 500px;
margin-bottom: 0;
}
.project-title {
width: 500px;
background-color: #303841;
text-align: center;
margin-top: 0;
padding: 30px 0;
}

Your browser information:

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

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

2

A lot of beginners have “wrapping syndrome” when they afraid of wrapping thing with block elements, like div. There is pretty much only one situation when you may use unwrapped inline elements put together - text. In any other scenario, especially if they of different kind - wrap them!

<!-- Card -->
<div class="card">
  <!-- DIVided by two elements inside -->
  <div class="card-featured-image"><div>
  <div class="card-title"></div>
</div>

This is absolutely correct from the point of semantics. In your case you also need to wrap those children elements with a tag to make the whole card a link.

3

And speaking of semantics I think it would also make sense to use list element for the list of the projects in your portfolio:

<section id="portfolio">
  <ul class="grid-list">
    <li class="card">
      <a class="card-wrapper" href="url://to.the.project" target="_blank" rel=”noreferrer noopener”>
        <!-- DIVided by two elements inside -->
        <div class="card-featured-image"><div>
        <div class="card-title"></div>
      </a>
    </li>
  </ul>
</section>
4

Thanks @snigo.

I tried wrapping the image and title in div elements as follows:

<div class="project-tile">
  <a href="https://codepen.io/GremlinSW/pen/Yzyapdp" target="_blank">
    <div class="img"><img class="project-img" src="https://codepen.io/GremlinSW/pen/Yzyapdp/image/small.png"></div>
    <div class="project-title">Tribute Page</div>
  </a>
</div>

Then, I removed the respective top and bottom margins as shown:

.img {
  margin-bottom: 0;
}
.project-img {
  width: 500px;
  margin-bottom: 0px;
}
.project-title {
  width: 500px;
  background-color: #303841;
  text-align: center;
  margin-top: 0;
  padding: 30px 0;
}

Unfortunately, the gap between the image and the image title is still there. Where did I go wrong?

5

@GremlinSW Try this and see if it the way you want that column set up (I added/subtracted some CSS to center the column in the flex layout you have) and I found the problem almost immediately;

#projects > header {
  padding-top: 100px;
  text-align: center;
  font-size: 2rem;
  color: white;
  text-decoration: underline;
}

.container {
  display: flex;
  flex-direction: column;
  place-items: center;
  padding: 0 50px;
}
.project-tile {
  margin: 50px;
}
.img {
  margin-bottom: 0;
}
.project-img {
  width: 500px;
}
.project-title {
  width: 500px;
  background-color: #303841;
  text-align: center;
  padding: 30px 0;
}

The project-tile is why that gap between the header and the image was there and causing the issue you were inquiring about originally.

The “Let’s Work Together” section looked a bit askew, so I think this will center that (if that’s what you’re going for) a lot better;

#contact {
  display: flex;
  flex-direction: column;
  place-items: center;
  color: white;
  background-color: #303841;
}
#contact h1 {
  font-size: 3.5rem;
  padding-top: 200px;
  line-height: 5px;
}
.icon {
  justify-self: center;
  font-size: 1.3rem;
  padding: 50px 0 150px 0;
}
6

Thanks @six03.

Actually that is not what I have in mind. I am trying to achieve something similar to this:

However, if you look at my version @ https://codepen.io/GremlinSW/pen/BaoOryo, you will notice a very small gap between the image and the title block at the bottom of each image. That is the issue I am trying to resolve.

Would you be able to advise, pls?