Так что я новичок в HTML, CSS, Bootstrap и JavaScript Я сделал эту галерею, она выглядит великолепно, но мне нужно исправить это для мобильных устройств и небольших экранов. Что я должен изменить?
Эти # myImg4,5,12,13 являются вертикальными изображениями, размещенными по-разному из-за дизайна
P C Предварительный просмотр: https://imgur.com/a/PK8irdL
1009 *
и это, как он выглядит на небольшом экране 1013 * КСТАТИ: Я знаю, что код очень плохо, но я начал с кодировкой 4days а go так: /
Я очень благодарен за каждый Ответ !!!! CSS Код для галереи:
.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%;
}
}