Can't Figure Out Why This Code Keeps Breaking

I’m working on my portfolio page, on the portfolio section.

Here’s the codepen file: https://codepen.io/Sadaajit/full/wWJBdZ/

As the page stands right now everything works. However, each of my “portfolios” is on a separate line, even though I’ve put the class=“row” command in. The problem comes when I try to assign a column designation to the three “portfolios.” When I add div class=“col-md-4” (or 6 or 8 or sm or xs) and a /div at the end of each thumbnail, everything goes completely haywire. Some of the photos get huge, some of the boxes merge. It is quite amazing what one little line of code can do!

Can anyone tell me why it is blowing up and what I need to do to get these suckers all on one line. I’ve just about completed the page, but this has put a rather large wrench in the works. I’ve tried everything I can think of and I’m still stuck.:confounded:

put each of your thumbnails into a separate <div class="col-sm-4">

OK, I’ve done that, but I still have a big problem. Now the pictures are huge, whereas before they were thumbnail size. Any suggestions?

Finally got it working. It had to do with the number of I put after each thumbnail. The only problem I have is that the first “portfolio” is bigger than the others. Any ideas one why?

Figured it out. One photo was quite a bit bigger in size, so it was coming out bigger in on the page. I’ve gotten them as close to the same size as I can.

Try setting .thumbnail img { max-height: 200px; }

What you also can do is create an outer div around the images and give all of them the same height and width. Now your thumbnail labels will be aligned and everything else as well.

Thanks to everyone for all your help. I finally got everything to work the way I wanted it to, so now I’m ready to send it off.:smirk: