Just starting out with HTML, CSS, Bootstrap, and JavaScript and I've put together this gallery. It looks good, but I need to optimize it for mobile devices and smaller screens. Any suggestions on what I should change?
For items #myImg4, #myImg5, #myImg12, #myImg13, they are vertical images placed differently due to the design.
PC preview: https://i.sstatic.net/DLSwS.jpg
And this is how it looks on a smaller screen
By the way, I'm aware that the code is not the best, but I've only been coding for 4 days, so bear with me!
I really appreciate all responses!!!! CSS code for the 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%;
}
}