[FIXED] How to stop an image from moving when using different scroll/resolution?

Issue

I am currently making a portfolio in HTML/CSS. But I have encountered the problem, that whenever I change either the scroll level or the resolution size, the images on the site moves around. I want them to stay in the block they are currently sitting in, at zoom 100% on a 1920x1080 monitor.

I have tried to change the position in the CSS to absolute, but that removed some images and totally changed the places the one left image was.

Here is the code:

.row {
  text-align: center;
}

.containerPortfolio {
  position: relative;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
}

.containerPortfolio .content {
  position: absolute;
  width: 400px;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 400px;
  padding: 15px;
}

<div class="row">
  <div class="containerPortfolio">
    <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio1.jpg">
    <div class="content">
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="containerPortfolio">
    <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio2.jpg">
    <div class="content">
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="containerPortfolio">
    <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio3.jpg">
    <div class="content">
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="containerPortfolio">
    <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio4.jpg">
    <div class="content">
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="containerPortfolio">
    <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio5.jpg">
    <div class="content">
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="containerPortfolio">
    <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio6.jpg">
    <div class="content">
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="containerPortfolio">
    <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio7.jpg">
    <div class="content">
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="containerPortfolio">
    <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio8.jpg">
    <div class="content">
      <p>Lorem ipsum..</p>
    </div>
  </div>
</div>

Solution

I found a solution after some more thinking.

I have made a new <div> and given it the class name inblock. After that I just made a few extra lines of CSS like so:

.inblock {
  max-width: 1920px;
  min-width: 1080px;
  margin: auto;
  justify-content: center;
}

And then the problem with my images moving around and going out of their group was fixed. The new updated HTML is as follows:

    <div class="inblock">
        <div class="row">
            <div class="containerPortfolio">
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio1.jpg">
                <div class="content">
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div class="containerPortfolio">
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio2.jpg">
                <div class="content">
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div class="containerPortfolio">
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio3.jpg">
                <div class="content">
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div class="containerPortfolio">
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio4.jpg">
                <div class="content">
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div class="containerPortfolio">
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio5.jpg">
                <div class="content">
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div class="containerPortfolio">
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio6.jpg">
                <div class="content">
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div class="containerPortfolio">
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio7.jpg">
                <div class="content">
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div class="containerPortfolio">
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio8.jpg">
                <div class="content">
                <p>Lorem ipsum..</p>
                </div>
            </div>
        </div>
    </div>

The ondragstart was something I put in afterwards, but it basicly just means that the images can't be dragged around by the user with their mouse.

Hopefully I have explained this enough, and that this will work for other people as well :)

Answered By - Tobias

Answer Checked By - Terry (PHPFixing Volunteer)