Div re-sizing when Child paragraph element re-sizes.

Michael,

Based on my experimentation, the gallery-div text paragraphs cause the alignment problem. They need a consistent size like height: 33%;.

To validate, place the same amount of text in each paragraph. If you make all the text boxes with equal text the "gallery-divs" will align.

.gallery-div-par {
      height: 33%;
}

<p class="gallery-div-par">  text............ </p>

You might want to make the text box even more static by setting the height to some multiple of the line height in "em".

gallery-div-par {
  line-height: 1.5em;
  height: 4.5em;  /* three lines */
   overflow: hidden;
}

Give it a try,

Bob

Hi Michael, I added a div to your html <div class="gallery-text">, in each gallery-div, around the title and description.

 <div class="gallery-text">
              <p class="para-title">Marketing Page</p>
              <p>This project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
              </div>

In the responsive.css, I added this:
(forgot to add in vertical align in my original answer)

 .gallery-div {
    width: 45%;
    min-height: 10vmin; 
    position: relative; 
    display: inline-block;
    vertical-align: top;
    margin: 0 0 2%; 
  }
.gallery-text {
    padding-bottom: 1em;
  }

The vertical-align will make it so that you don't need to worry about the exact amount of text in descriptions.

Hope this helps!

Michael,

It applies to the title paragraph as well. A real fix may include altering the font-size in the title paragraph. You might relegate the title size two( 2 ), lines or twice the line height.

It seems to be working for me using the line height approach.

By the way, I like your layout.

Bob