'More details' button pushes row of images out of line

Remove the fixed height of 400px from .thumbnail-row and make it a min-height instead. And then make it display:flex;

Here is what I changed:

.thumbnail-row {
  width: auto;
  min-height: 400px;
  display: flex;
}

See it all working here:

 function toggle(button){
    
        // this works because the button is immediately after the "moreDetails" element it pertains to
        let Text = button.previousElementSibling;
    
        // this would work if you move the button so it is not immediately after moreDetails, but still in the same parent div.
        //let Text = button.parentElement.querySelector(".moreDetails");
    
        if(Text.style.display == "none"){
            Text.style.display= "block";
        }
        else {
            Text.style.display = "none";
        }
    }

const moreDetailses = document.querySelectorAll(".moreDetails");
for (let i = 0; i < moreDetailses.length; i++) {
  moreDetailses[i].style.display = "none";
}

.thumbnail-row {
  width: auto;
  min-height: 400px;
  display: flex;
}

.thumbnail-frame {
  width: 19.75%;
  height: auto;
  margin-left: 4%;
  float: left;
}

.thumbnail-frame a {
  margin: 0;
}

.thumbnail-frame h3 {
  text-align: center;
}

.thumbnail-frame h4 {
  text-align: center;
}

.thumbnail {
  background-color: black;
  width: 100%;
  height: 350px;
  display: inline-block;
  /* makes it fit in like an <img> */
  background-size: cover;
  /* or contain */
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="thumbnail-row">
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 01 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 02 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 03 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 04 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
</div>

<div class="thumbnail-row">
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 05 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 06 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
</div>

'More details' button pushes row of images out of line

Related

Recent Posts