Report

есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
.content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>

Не работает transition при появлений модального окна:
<a class="btn">Modal</a> <div class="modal"> <div class="overlay"> <div class="content"> <a class="close">X</a> <h1>Title</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellat asperiores rerum animi officiis minus corporis iure voluptate accusantium, ut optio ratione iusto nemo delectus. Quasi illum libero dolorum neque?</p> </div> </div> </div> //scss .modal .overlay{ position: fixed; top: 0;left: 0; width: 100%;height: 100%; background: rgba($color: #000000, $alpha: .8); z-index: 1; display: none; } .modal .content{ width: 500px;height: 200px; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); background-color: #fff; z-index: 2; text-align: center; display: none; a{ line-height: 30px; font-weight: bold; color: #fff; top: -50px;; position: absolute; right: -50px; font-size: 40px; padding: 10px; } h1{ margin-bottom: 20px; } } .modal.active .overlay{ display: block; } .modal.active .content{ display: block; } //Jquery $(document).ready(function(){ $(".btn, .close").click(function() { $(".modal").toggleClass("active") }) }) Я понимаю что на display не работает transition. но и нельзя ставить opacity т.к перекрывает контент сзади него изначально.

Что делать?

Столкнулся с проблемой , когда вставил картинку , весь текст съехал в лево , а сама картинка , должна находиться с низу сайта
И еще вопрос , как сделать так , чтобы когда я уменьшал размер сайта , облаки оставались на своих местах ?
HTML
CSS
 

решено 

Всем привет! Подскажите, пожалуйста, как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри? У меня в принципе все работает, блок открывается и закрывается, НО если я нажимаю на блок, а не на стрелочку, она у меня остается в таком же положении(а она должна у меня меняться, когда блок открывается), и получается куча мала, и выглядит это не очень презентабельно. Подскажите, пожалуйста!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 1 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 1</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 2 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 2</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 3 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 3</div> </div> </div> </div> .div{ border: 1px solid #3A444E; border-radius: 10px; width: 300px; height: 64px; overflow: hidden; } .div.open { height: auto; background: #000; color: #fff; } .window-one { display: flex; align-items: center; justify-content: space-between; } .title { margin-bottom: 20px; } .arrow-test { content: ''; background: url('http://cdn.onlinewebfonts.com/svg/img_387044.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } .arrow-test.open { content: ''; background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Eo_circle_yellow_arrow-up.svg/1024px-Eo_circle_yellow_arrow-up.svg.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } $('.div, .arrow-test').click( function(){ $(this).toggleClass('open')});  

Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
CSS
В результате отображается следующая картинка

в режиме инструментов разработчика. А вне режима вообще отображает

Подскажите как добиться отображения текста как на макете.