Image Gallery - mobile devices optimazation

Question

So i'm new to HTML, CSS, Bootstrap and JavaScript i made this gallery, it looks great but i need to fix it for mobile devices and smaller screens. What i should change?

Those #myImg4,5,12,13 are vertical images placed in differently because of design

PC preview: https://imgur.com/a/PK8irdL

and this is how it looks on smaller screen

BTW: I know, that code is very bad but i started with coding 4days ago so :/

I'm very thankful for every Respond!!!! CSS Code for gallery is:

.gallerycontent {
  margin: 10px 200px 40px 100px;
}

.galleryhr {
  border-top: 2px solid #FF0000;
  width: 100;
}
.galleryhr h1 {
  color: #000;
  text-align: center;

}

/* Style the Image Used to Trigger the Modal */
#myImg , #myImg2 , #myImg3 , #myImg6 , #myImg7 , #myImg8 , #myImg9 , #myImg10 , #myImg11 , #myImg14 , #myImg15 , #myImg16 {
  margin-left: 20px;
  max-height: 200px;
  height: 100%;
  margin-bottom: 10px;
  cursor: pointer;
  transition: 0.3s;

}

#myImg4 {
  max-height: 414px;
  height: 100%;
  position: absolute;
  top: 165px;
  right: 186px;
  cursor: pointer;
  transition: 0.3s;
}
#myImg5 {
  max-height: 414px;
  height: 100%;
  position: absolute;
  top: 165px;
  right: 511px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg12 {
  max-height: 414px;
  height: 100%;
  position: absolute;
  top: 590px;
  right: 511px;
  cursor: pointer;
  transition: 0.3s;
}
#myImg13 {
  max-height: 414px;
  height: 100%;
  position: absolute;
  top: 590px;
  right: 186px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}
#myImg2:hover {opacity: 0.7;}
#myImg3:hover {opacity: 0.7;}
#myImg4:hover {opacity: 0.7;}
#myImg5:hover {opacity: 0.7;}
#myImg6:hover {opacity: 0.7;}
#myImg7:hover {opacity: 0.7;}
#myImg8:hover {opacity: 0.7;}
#myImg9:hover {opacity: 0.7;}
#myImg10:hover {opacity: 0.7;}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 50%;
  max-width: 1000px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }





}

Answer 1

I would suggest to use bootstrap ( https://getbootstrap.com/ ), you could do something like this in bootstrap v3:

<div class='row'>
  <div class='col-lg-12'>
     <div class='col-lg-8'>
      <img class='img-responsive col-lg-4' src='image/path'/>
      <img class='img-responsive col-lg-4' src='image/path'/>
      <img class='img-responsive col-lg-4' src='image/path'/>
     </div>
     <div class='col-lg-4'>
      <img class='img-responsive col-lg-6' src='image/path'/>
      <img class='img-responsive col-lg-6' src='image/path'/>
     </div>
  </div>
</div>

and it should look good also on mobile.

Answer 2

The culprit here is being 'too precise' with the positions. Absolute positioned items are not aware of their physical context. They don't know when they should occupy less space or go on a new row.

It's time to take a look at Responsive Web Design . There are a couple of ways in which you can approach it.

• Float based layouts: https://www.w3schools.com/css/css_float.asp
• Grid based layouts: https://css-tricks.com/snippets/css/complete-guide-grid/
• Flex based layouts: https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp

Start in this order.

Enjoy the process!