# Portfolio Project- having a tough time with the thumbnails

**URL:** <https://forum.freecodecamp.org/t/portfolio-project-having-a-tough-time-with-the-thumbnails/146382>\
**Category:** I Built This\
**Created:** [September 6, 2017, 8:14pm UTC](https://forum.freecodecamp.org/t/portfolio-project-having-a-tough-time-with-the-thumbnails/146382 "2017-09-06T20:14:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![neuroduck](https://avatars.discourse-cdn.com/v4/letter/n/7cd45c/32.png) [@neuroduck](https://forum.freecodecamp.org/u/neuroduck)\
**Post date:** [September 6, 2017, 8:14pm UTC](https://forum.freecodecamp.org/t/portfolio-project-having-a-tough-time-with-the-thumbnails/146382/1 "2017-09-06T20:14:31Z")

</div>

I’m missing something and can’t quite figure out what’s wrong I have only managed to make it wrong in different ways. My images aren’t a consistent size and they don’t load into the columns that I expect. I intended to have 3 columns in the Coding section. Is there something I should put into CSS to standardize it for all thumbnails? Thanks for helping!

Portfolio project - [https://codepen.io/neuroduck/full/KvJpNz/](https://codepen.io/neuroduck/full/KvJpNz/)

```auto
<div id="coding">
  <a id="coding" class="smooth"></a>
  <h3>Coding</h3>
<div class = "container-responsive">
  <div class = "row">
  <!--1st-->
   <div class = "col-sm-6 col-md-3">
      <a href = "#" class = "thumbnail">
      <img src = "#""></script>
</a>
  <div class = "caption">
<h6>A tribute page for my Grandma.</h6>
     </div></div>
   <!--2nd-->
 <div class = "col-sm-6 col-md-3">
   <a href = "#" class = "thumbnail">
    <img src = "#" alt = "Caterpillar" height ="300px">
      </a>
   <h6>2 day old caterpillar, waiting for the next coding project.</h6></div>
   </div>
   <!--3rd-->
<div class = "col-sm-6 col-md-3">
   <a href = "#" class = "thumbnail">
  <img src = "#" alt = "Cocoons" width = "300px">
      </a>
  <div class = "caption">
    <h6>2 cocoons hanging out.</h6></div>
   </div>
   <!--4th-->
<div class = "col-sm-6 col-md-3">
  <a href = "#" class = "thumbnail">
   <img src = "#" alt = "Eclose" height = "150px">
      </a>
  <div class = "caption">
    <h6>A new butterfly.</h6></div>
   </div>
</div>
</div> 

```

---

<div class="post-metadata">

**Author:** ![wpederzoli](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/wpederzoli/32/64980_2.png) [@wpederzoli](https://forum.freecodecamp.org/u/wpederzoli)\
**Post date:** [September 6, 2017, 8:22pm UTC](https://forum.freecodecamp.org/t/portfolio-project-having-a-tough-time-with-the-thumbnails/146382/3 "2017-09-06T20:22:15Z")

</div>

You could give your images a fixed height and a width of 100%.  
Something like:

a.thumbnail img{  
width: 100%;  
height: 120px; (your desired height)  
}

---

<div class="post-metadata">

**Author:** ![neuroduck](https://avatars.discourse-cdn.com/v4/letter/n/7cd45c/32.png) [@neuroduck](https://forum.freecodecamp.org/u/neuroduck)\
**Post date:** [September 7, 2017, 1:40am UTC](https://forum.freecodecamp.org/t/portfolio-project-having-a-tough-time-with-the-thumbnails/146382/4 "2017-09-07T01:40:22Z")

</div>

Thank you both. I didn’t understand that each row needed to be stopped and the next row started over with :

```auto
<div class="row">
<div class = "col-sm-4">

```

I knew I didn’t quite understand the grid system, but I didn’t know why. Lightbulb moment.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 7:49pm UTC](https://forum.freecodecamp.org/t/portfolio-project-having-a-tough-time-with-the-thumbnails/146382/5 "2021-01-17T19:49:20Z")

</div>