1

Here's the code on index.html:

             <div class="row">
                <div class="col-lg-4 col-sm-6 mb-4">
                    <div class="portfolio-item">
                        <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1"
                            ><div class="portfolio-hover">
                                <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                            </div>
                            <img class="img-fluid" src="assets/img/portfolio/01-thumbnail.jpg" alt=""
                        /></a>
                        <div class="portfolio-caption">
                            <div class="portfolio-caption-heading">Test Test</div>
                            <div class="portfolio-caption-subheading text-muted">Tech</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 mb-4">
                    <div class="portfolio-item">
                        <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2"
                            ><div class="portfolio-hover">
                                <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                            </div>
                            <img class="img-fluid" src="assets/img/portfolio/02-thumbnail.jpg" alt=""
                        /></a>
                        <div class="portfolio-caption">
                            <div class="portfolio-caption-heading">Test Test Test Test Test Test</div>
                            <div class="portfolio-caption-subheading text-muted">Education</div>
                        </div>
                    </div>
                </div>
            </div>

Portfolio items are the boxes that have a clickable image (that leads to a modal) that has a title (caption-heading) and a subtitle (caption-subheading). The picture below shows what I'm looking at.

enter image description here I need all of the boxes (the white boxes) to line up with whichever box has the highest height, in this case, the last box in the row.

Here is the CSS that I believe is the problem:

  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

I've been using the dev tools to test every div I can find relating to these boxes and nothing I can think of/find will force these boxes to stretch. I've tried align-items: stretch, justify-content, but nothing works.

Any advice or things to try would be helpful. I've been looking at this since Friday morning.

Edit:

Here is the css for the other tags in my question:

#portfolio .portfolio-item {
  max-width: 25rem;
  margin-left: auto;
  margin-right: auto;
}
#portfolio .portfolio-item .portfolio-link {
  position: relative;
  display: block;
  margin: 0 auto;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(254, 209, 54, 0.9);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity ease-in-out 0.25s;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
  font-size: 1.25rem;
  color: white;
}
#portfolio .portfolio-item .portfolio-link:hover .portfolio-hover {
  opacity: 1;
}
#portfolio .portfolio-item .portfolio-caption {
  padding: 1.5rem;
  text-align: center;
  background-color: #fff;
}
#portfolio .portfolio-item .portfolio-caption .portfolio-caption-heading {
  font-size: 1.5rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  margin-bottom: 0;
}
#portfolio .portfolio-item .portfolio-caption .portfolio-caption-subheading {
  font-style: italic;
  font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
WarrenJB
  • 129
  • 2
  • 13
  • See if this gets you any closer: https://stackoverflow.com/questions/38794176/using-css-flex-to-make-elements-equal-height-in-a-row – agrm May 30 '20 at 20:58

0 Answers0