@Rem36

Почему блоки не сужаются при уменьшении экрана а вылезают за родителя?

Здрасти, при сужении контента блоки слайдов не уменьшаются а вылезают за контейнер. Что не так?

<section class="section__gallery">
            <div class="container">
                <div class="section__gallery-wrap">
                    <div class="section__gallery-left-block">
                        <div class="section__gallery-inner-left-block">
                            <h2 class="section__gallery-title title-h2 white-h2">
                                Галерея
                            </h2>
                            <label for="" class="section__gallery-label-for-select">
                                Фильтр:
                            </label>
                            <select name="" id="section__gallery-select-category"
                                class="section__gallery-select-category">
                                <option value="">Живопись</option>
                            </select>
                        </div>
                        <div class="section__gallery-left-block-descr">
                            <p class="section__gallery-left-block-descr">
                                Вам предоставляется 10 бесплатных скачиваний. Для увеличения количества скачиваний
                                <a href="#" class="section__gallery-left-block-link">авторизуйтесь,</a> либо
                                воспользуйтесь лицензией.
                            </p>
                        </div>
                    </div>

                    <div class="section__gallery-right-block">
                        <div class="slider-container swiper-container">
                            <!-- Additional required wrapper -->
                            <div class="swiper-wrapper">
                                <!-- Slides -->
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-1-img-1.jpg" class="js-smartPhoto" data-caption="Caption 1"
                                        data-id="id-1">
                                        <img src="img/gallery/gallery-slider/slide-1-img-1.jpg" data-group="group"
                                            class="gallery-img">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-1-img-2.jpg" class="js-smartPhoto" data-caption="Caption 2"
                                        data-id="id-2">
                                        <img src="img/gallery/gallery-slider/slide-1-img-2.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-1-img-3.jpg" class="js-smartPhoto" data-caption="Caption 3"
                                        data-id="id-3">
                                        <img src="img/gallery/gallery-slider/slide-1-img-3.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-1-img-4.jpg" class="js-smartPhoto" data-caption="Caption 4"
                                        data-id="id-4">
                                        <img src="img/gallery/gallery-slider/slide-1-img-4.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-1-img-5.jpg" class="js-smartPhoto" data-caption="Caption 5"
                                        data-id="id-1">
                                        <img src="img/gallery/gallery-slider/slide-1-img-5.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-1-img-6.jpg" class="js-smartPhoto" data-caption="Caption 6"
                                        data-id="id-6">
                                        <img src="img/gallery/gallery-slider/slide-1-img-6.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-2-img-1.jpg" class="js-smartPhoto" data-caption="Caption 7"
                                        data-id="id-7">
                                        <img src="img/gallery/gallery-slider/slide-2-img-1.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-2-img-2.jpg" class="js-smartPhoto" data-caption="Caption 8"
                                        data-id="id-8">
                                        <img src="img/gallery/gallery-slider/slide-2-img-2.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-2-img-3.jpg" class="js-smartPhoto" data-caption="Caption 9"
                                        data-id="id-9">
                                        <img src="img/gallery/gallery-slider/slide-2-img-3.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-2-img-4.jpg" class="js-smartPhoto" data-caption="Caption 10"
                                        data-id="id-10">
                                        <img src="img/gallery/gallery-slider/slide-2-img-4.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-2-img-5.jpg" class="js-smartPhoto" data-caption="Caption 11"
                                        data-id="id-11">
                                        <img src="img/gallery/gallery-slider/slide-2-img-5.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-2-img-6.jpg" class="js-smartPhoto" data-caption="Caption 12"
                                        data-id="id-12">
                                        <img src="img/gallery/gallery-slider/slide-2-img-6.jpg" data-group="group">
                                    </a>
                                </div>

                            </div>
                            <!-- If we need pagination -->
                            <div class="slider-pagination swiper-pagination"></div>

                            <!-- If we need navigation buttons -->
                            <div class="slider-btn-prev swiper-button-prev"></div>
                            <div class="slider-btn-next swiper-button-next"></div>
                        </div>
                    </div>

                </div>
                <p class="section__gallery-left-block-descr2">
                    Вам предоставляется 10 бесплатных скачиваний. Для увеличения количества скачиваний
                    <a href="#" class="section__gallery-left-block-link">авторизуйтесь,</a> либо
                    воспользуйтесь лицензией.
                </p>
            </div>
            </div>


.section__gallery-wrap{
    display: flex;
}

.section__gallery-left-block{
    display: flex;
    max-width: 400px;
    flex-direction: column;
    justify-content: space-between;
}

.slider-container {
    max-width: 1150px;
}

.swiper-button-next, .swiper-button-prev{
    top:55%
}

.swiper-button-next{
    right: 0;
}

.swiper-button-prev{
    left: 0;
}

.slider-slide{
    max-width: 350px;
    max-height: 350px;
}

.slider-slide img{
    width: 100%;
    height: 100%;
}
  • Вопрос задан
  • 81 просмотр
Пригласить эксперта
Ответы на вопрос 1
approximate_solution
@approximate_solution
JS Developer. Angular\React\Vue\Ember
Что и где?
60f125c688b75534045937.png
60f1262a33e67148262940.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы