Сделайте этот макет отзывчивым без дублирующих элементов - PullRequest
Новая
       15

Сделайте этот макет отзывчивым без дублирующих элементов

0 голосов
/ 05 апреля 2019

Я должен создать эту компоновку, реагирующую на пользовательский слайдер:

https://imgur.com/YbKdOAC

https://imgur.com/TPo2h57

- Значок изображения, на котором будут находиться слайды.

- есть еще один розовый блок с элементами управления ползунка.

-В последнем розовом блоке есть текст. Ничего особенного.

В этих шаблонах есть 2 фоновых изображения.

Я начал с настольной версии с использованием flexbox, , но когда я попытался настроить макет для версии планшета, это было невозможно, поскольку эти два элемента находятся в разных рядах.

https://imgur.com/Upjsh8B

Это более или менее мой код прямо сейчас: 

<div class="slider">
    <div class="container">
        <div class="row">
            <div class="col-3">
                <img class="logo-img"
                     src="assets/images/logo.png">
                <div class="titulo-boton">
                    <h1>Lorem ipsum</h1>
                </div>
            </div>
            <div class="col-9">
                <div class="row primera" primera>
                    <div class="col yourtrip">
                        <h2>Lorem ipsum</h2>
                        <hr>
                        <p class="tags">#tags</p>
                    </div>
                    <div class="col"></div>

                    <div class="col ">
                        <div class="image-slider image-wrap">
                            <!--                            <img src="assets/images/rocket.png">-->
                        </div>
                    </div>
                </div>
                <div class="row" segunda>
                    <div class="col"></div>
                    <div class="col controls" controls>
                        <div class="botones row w-100">
                            <div class="col p-0">
                                <a href="#" class="btn">prev</a>
                            </div>
                            <div class="col p-0">
                                <a href="#" class="btn">next</a>
                            </div>
                        </div>
                    </div>
                    <div class="col"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Спасибо за вашу помощь!

Edit:

Я создал ручку, чтобы сделать вещи проще. Активы разные, но макет тот же.

https://codepen.io/jenvigo/pen/jRrwdw?editors=1100

...