Need help sizing images and creating grid

1

Hello,

I’m working my way through the first five HTML/CSS projects. I’ve found one of my weaknesses is sizing images. This portfolio is an example of me not knowing what to do.

https://codepen.io/LouisPetrich/pen/LYGpLWW?editors=1100

I put borders around them and that confused me more. As you can see, I’m trying to get the images and the h2 tags below them to fit in a grid, but that doesn’t seem to be working either.

Conclusion: I do not know how to properly size these images and fit them and their headings in a grid.

2

Hello !
I’ve found out where is your problem !

You’re closing the last div after your 3 h2 :

    <div class="project-tile">
      <a id="mid3" href="https://codepen.io/LouisPetrich/pen/OJMVVbx">
      <img src="https://i2.wp.com/www.tutorialbrain.com/wp-content/uploads/2019/01/HTML-Form.jpg?fit=1920%2C1080&ssl=1" alt="htmlform">
      </a>
      <h2 id="bot1">Technical Documentation Page</h2>
      <h2 id="bot2">CSS Grid Template</h2>
      <h2 id="bot3">HTML Form Example</h2>
    </div>
  </section>

So CSS thinks that your h2 are in the"#mid3"

If you close your div between </a> and your first <h2>, it works better :

    <div class="project-tile">
      <a id="mid3" href="https://codepen.io/LouisPetrich/pen/OJMVVbx">
      <img src="https://i2.wp.com/www.tutorialbrain.com/wp-content/uploads/2019/01/HTML-Form.jpg?fit=1920%2C1080&ssl=1" alt="htmlform">
      </a>
      </div>
      <h2 id="bot1">Technical Documentation Page</h2>
      <h2 id="bot2">CSS Grid Template</h2>
      <h2 id="bot3">HTML Form Example</h2>
  </section>
1 Like
3

Thanks!

I made the change and it’s looking good.

What I learned: check the parent and child elements when debugging; make sure children are where they are supposed to be.