Отзывчивый вопрос, делающий нарезанный слайдер

Question

Я создаю слайдер слайдера для образовательных целей, чтобы испытать отзывчивый дизайн.

Я пробовал уже 3 дня, чтобы сделать его отзывчивым, но все, что я пробовал, не работает.

Всякий раз, когда кто-то нависает над страницей, скрывается div с 4 изображениями внутри. И когда я увеличиваю масштаб, последнее изображение меняет позиции.

Это мой код:

<div class="container"> 
    <div class="reveal unreveal"> 
    <div class="caption"> 
    <div class="contContainer"> 
     <div class="imgContainer"> 
     <img src="css/image1.png" /> 
     </div> 
     <div class="imgContainer"> 
     <img src="css/image2.png" /> 
     </div> 
     <div class="imgContainer"> 
     <img src="css/image3.png" /> 
     </div> 
     <div class="imgContainer2"> 
     <img class="yoloimg" src="css/image4.png" /> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 

CSS:

body { 
    background: #222; 
    max-width:100%; 
    min-width:80%; 
} 
.contContainer { 
width:90%; 
padding:5px; 
margin:0 auto; 
} 
.imgContainer { 
width:20%; 
padding:0px; 
margin:0 auto; 
text-align:center; 
position:relative; 
float:left; 
margin-left:5px; 

} 
.imgContainer2 { 
width:38%; 
padding:0px; 
margin:0 auto; 
text-align:center; 
position:relative; 
float:left; 
} 
.yoloimg { 
width:94%; 
height:auto; 
} 
.imgContainer img { 
width:96.8%; 
height:auto; 

} 
.unreveal { 

    background: url("ayo_bottom.png") 0px 278px, url("ayo_top.png") 0px 0px, #ffffff; 
    background-repeat: no-repeat; 
    -webkit-transition: background-position 0.3s ease; 
    -moz-transition: background-position 0.3s ease; 
    background-size:contain; 
    transition: background-position 0.3s ease; 
} 

.unreveal:hover { 
    background-repeat: no-repeat; 
    -webkit-transition: background-position 0.3s ease; 
    -moz-transition: background-position 0.3s ease; 
    transition: background-position 0.3s ease; 
    background: url("ayo_bottom.png") 0px 500px, url("ayo_top.png") 0px -50px, #ffffff; 
    background-repeat: no-repeat; 
    background-size:contain; 
} 

.reveal { 
    max-width:1100px !important; 
    width:100%; 
    height:auto; 
    min-height:800px; 
    float: left; 
    margin:0 auto; 
} 

div.caption { 
     top: 32%; 
     max-width:1100px; 
     position: absolute; 
     margin:0 auto; 
     display:none; 
    background:#2b2a28; 

} 

Я использую Скелет 2.0.4 (используется Bootstrap также, но ничего не произошло). Я думаю, что проблема в том, что я использую 2 изображения для фона в классе .unreveal, но я не знаю, что еще мне нужно делать. Я использовал max-width:everywhere, margin:0 auto, и у меня есть медиа-запросы из скелета.

Я загрузил его, если кто-то хотел бы взглянуть на него: test-site.

Заранее спасибо.

EDIT: После исправления положения изображения все еще проблема с контейнером. Когда я увеличиваю масштаб, высота увеличивается на 2400px img of what happening. Я использовал max-height:1100px на контейнере и теле, но делаю работу. Я использовал разные доктрины и без результата.

Answer 1

Проблемы вы видите ваша% ширина:

.imgContainer { 
    width: 20%; 
    padding: 0px; 
    margin: 0 auto; 
    text-align: center; 
    position: relative; 
    float: left; 
    margin-left: 5px; 
} 

Когда вы нажмете 765px в ширину, вы получаете 20% каждый (153px вычисленного) плюс 5px для поля левое: 158 х 3 = 474

Вы imgContainer2 имеет ширину 38%, которая подталкивает его чуть выше, когда вы находитесь на расстоянии 765 пикселей и вынуждает его на следующую строку. Либо избавиться от наценки левых полностью или написать запрос для СМИ 765px:

@media screen and (max-width: 765px) { 
    .imgContainer { 
     margin-left: 0; 
    } 
} 

Если поиграться с размерами, вы увидите, что переход к следующей строке происходит на 765px точно. При ширине 766 пикселей это выглядит хорошо. Как правило, вы хотите держаться подальше от полей пикселей и paddings при работе с% width. При изменении размера экрана вы всегда столкнетесь с проблемой.