I have 3 image container aligned horizontal however I can't seem to make it responsive. When screen size are smaller, the box changed to a smaller size and the text were out of place. I would like the container align vertically when screen size are small and container to have a fixed shape and the text to stay together with the container.

Here is my code:

.images-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  top: -30px;
  position: relative;
  display: flex;
  justify-content: center;
}

.imgwide {
  width: 31.3%;
  height: 450px;
  border-radius: 7px;
  margin: 10px 10px 10px 10px;
  cursor: pointer;
}

.imgwide:hover {
  transition: all .1s ease-in-out;
  transform: scale(0.99);
}

.arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  position: absolute;
  left: 380px;
  bottom: 9px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.bottom-left {
  position: absolute;
  min-width: 700px;
  width: 50%;
  bottom: 30px;
  left: 48px;
  color: white;
  font-size: 1.3em;
  bottom: 25px;
}

.bottom-left2 {
  position: absolute;
  min-width: 700px;
  width: 50%;
  bottom: 30px;
  left: 521px;
  color: white;
  font-size: 1.2em;
}

.bottom-left3 {
  position: absolute;
  min-width: 700px;
  width: 50%;
  bottom: 30px;
  left: 991px;
  color: white;
  font-size: 1.2em;
}

<div >
  <div  style="background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,1)), url('assets/vr.jpeg');background-size: 600px; background-position: center;" onclick="window.open('https://virtualtour.eurasians.org.sg/ehg/', '_blank')"></div>
  <a href="https://virtualtour.eurasians.org.sg/ehg/" target="_blank">
    <div >Eurasian Heritage Gallery VR Tour<i ></i></div>
  </a>
  <div  style="background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,1)), url('assets/trail.webp');background-size: 600px;" onclick="window.open('https://pa-heritage-trails.web.app/overview.html', '_blank')"></div>
  <a href="https://pa-heritage-trails.web.app/overview.html" target="_blank">
    <div >Self-Guided Heritage Trails<i ></i></div>
  </a>
  <div  style="background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,1)), url('assets/grandfatherroad.png');background-size: 600px; background-position: center;" onclick="window.open('https://explore-grandfather-road.web.app/', '_blank')"></div>
  <a href="https://explore-grandfather-road.web.app/" target="_blank">
    <div >Let's Explore Our <br>Grandfathers Road<i ></i></div>
  </a>
</div>

---- EDIT ---- This is my current situation. I need the boxes to align with the header title.

CodePudding user response：

Your code isn't working properly because the way you are using position is wrong.

you don't need to make three different classes for your titles just make one class and set it's position to absolute and bottom:0;, then instead of setting position: relative; to .images-container set it to .imgwide, after this the titles should stick to bottom of the items

I made for you hope it helps, also made some changes to make it cleaner:)

[...document.querySelectorAll('.images-container .img')].forEach(img => {
  img.addEventListener('click', function() {
    window.open(this.children[0].href, '_blank');
  });
});

.images-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: auto;
}

.img {
  position: relative;
  width: calc(100% / 3);
  min-width: 180px;
  margin: 5px;
  height: 350px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  background-position: center !important;
  transition: all .1s ease;
  cursor: pointer;
}


/* change images here */

.img:nth-child(1) {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/ndN00KmbJ1c/640x400');
}

.img:nth-child(2) {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/mBQIfKlvowM/640x400');
}

.img:nth-child(3) {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/y2azHvupCVo/640x400');
}

.img:hover {
  transform: scale(0.99);
}

.title {
  position: absolute;
  display: flex;
  align-items: center;
  width: 100%;
  white-space: nowrap;
  height: auto;
  padding: 15px;
  --title-color: #ffffff;
  color: var(--title-color);
  font-size: max(16px, 1.2vw);
  bottom: 0;
}

.title::after {
  content: '';
  display: inline-block;
  padding: 3px;
  border: solid var(--title-color);
  border-width: 3px 3px 0 0;
  transform: rotate(45deg);
  margin: 0 8px;
}

@media only screen and (max-width: 600px) {
  .images-container {
    flex-direction: column;
  }
  .img {
    width: 95%;
    height: 330px;
    margin: 10px;
  }
  .title {
    font-size: max(16px, 1.5vw);
  }
}

<div >
  <div >
    <a href="https://virtualtour.eurasians.org.sg/ehg/" target="_blank">
      <div >Eurasian Heritage Gallery VR Tour</div>
    </a>
  </div>
  <div >
    <a href="https://pa-heritage-trails.web.app/overview.html" target="_blank">
      <div >Self-Guided Heritage Trails</div>
    </a>
  </div>
  <div >
    <a href="https://explore-grandfather-road.web.app/" target="_blank">
      <div >Let's Explore Our <br>Grandfathers Road</div>
    </a>
  </div>
</div>