'Make Image Container Responsive

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 class="images-container">
  <div class="imgwide" 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('', '_blank')"></div>
  <a href="" target="_blank">
    <div class="bottom-left"> VR Tour<i class="arrow right"></i></div>
  </a>
  <div class="imgwide" style="background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,1)), url('');background-size: 600px;" onclick="window.open('', '_blank')"></div>
  <a href="" target="_blank">
    <div class="bottom-left2">Trails<i class="arrow right"></i></div>
  </a>
  <div class="imgwide" style="background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,1)), url('');background-size: 600px; background-position: center;" onclick="window.open('', '_blank')"></div>
  <a href="" target="_blank">
    <div class="bottom-left3">Grandfathers Road<i class="arrow right"></i></div>
  </a>
</div>
responsive-design


Solution 1:[1]

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

...UPDATED...

That's pretty simple, you can do that with margin. example attached

[...document.querySelectorAll('.images-container .img')].forEach(img => {
  img.addEventListener('click', function() {
    window.open(this.children[0].href, '_blank');
  });
});
.head-title {
  border-left: 5px red solid;
  width: inherit;
  margin: 5px;
  padding: 10px;
}

.images-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.images-container .holder {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.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) {
  .head-title {
    margin: 5px 1%;
  }
  .images-container .holder {
    flex-direction: column;
  }
  .img {
    width: 98%;
    height: 390px;
  }
  .title {
    font-size: max(16px, 1.5vw);
  }
}
<div class="images-container">
  <div>
    <h2 class="head-title">Title 1</h2>
  </div>
  <div class="holder">
    <div class="img">
      <a href="https://virtualtour.eurasians.org.sg/ehg/" target="_blank">
        <div class="title">Eurasian Heritage Gallery VR Tour</div>
      </a>
    </div>
    <div class="img">
      <a href="https://pa-heritage-trails.web.app/overview.html" target="_blank">
        <div class="title">Self-Guided Heritage Trails</div>
      </a>
    </div>
    <div class="img">
      <a href="https://explore-grandfather-road.web.app/" target="_blank">
        <div class="title">Let's Explore Our <br>Grandfathers Road</div>
      </a>
    </div>
  </div>
</div>
<div class="images-container">
  <div>
    <h2 class="head-title">Title 2</h2>
  </div>
  <div class="holder">
    <div class="img">
      <a href="https://explore-grandfather-road.web.app/" target="_blank">
        <div class="title">Let's Explore Our <br>Grandfathers Road</div>
      </a>
    </div>
    <div class="img">
      <a href="https://virtualtour.eurasians.org.sg/ehg/" target="_blank">
        <div class="title">Eurasian Heritage Gallery VR Tour</div>
      </a>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions

jQuery - Execute scripts based on screen size

Responsive image slider using picture element?

How to reload a div for equal height child on window resize

Trouble with sticky footer, 2 column responsive layout with wide browser support

Responsive font size in CSS

Shrink a YouTube video to responsive width

Background image not showing in Safari

Putting -moz-available and -webkit-fill-available in one width (CSS property)

How to make scrollable pop up box?

<source> media attribute - width of container rather than screen?

How to make flutter app responsive according to different screen size?

HTML5 Picture element does not seem to be supported by Chrome 52? Srcset not working

Responsive Typography in Angular Material

Certain media queries in my code isn't working, any suggestions on how to solve this? For instance the 320px and the 360px media query isn't working

MediaObserver vs BreakpointObserver - what are the differences?