@iwtbf

Как разместить элементы?

Есть секция которая разделяется на две части, одна часть это скошенный контейнер с изображением и другая это текст, как разместить картинку и текст горизонтально и вертикально по середине своих секций? чтобы картинка не вылазила за границы правой части окна, помогите пожалуйста нубу, может это как-то флекса боксами можно сделать? вот что получилось на данный момент https://codepen.io/anon/pen/gWoMoK/
  • Вопрос задан
  • 300 просмотров
Решения вопроса 1
aliencash
@aliencash
Партизан
Нагородили вы конечно...
https://codepen.io/aliencash/pen/GmyreY?editors=1100
Для мелких экранов сделайте медиа выражения влияющие на размер шрифта.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Anadi
@Anadi
Если ответ Вам помог мой, решением отметье его!
Так?
<div class="section">
            <div class="container">
                <div class="section-description">
                    <h1>Description</h1>
                    <img src="http://cdn.iphonehacks.com/wp-content/uploads/2013/09/iphone_5c_ios_7.png" alt="image" />
                </div>
            </div>
        </div>

body{
                padding: 0;
                margin: 0;                
            }
            .section {
                position: relative;
                background-color: lightblue;
                overflow: hidden;
                min-height: 100vh;
            }
            .section::after{
                content: "";
                position: absolute;
                top: 0;
                right: -80%;
                width: 100%;
                height: 100%;
                background-color: white;
                transform: skew(45deg);
            }
            .section .container{
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 1;
            }
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
SPIKS Санкт-Петербург
от 70 000 до 90 000 ₽
PERX Нижний Новгород
До 50 000 ₽
10 окт. 2024, в 13:46
100000 руб./за проект
10 окт. 2024, в 13:37
1000 руб./за проект
10 окт. 2024, в 13:35
400000 руб./за проект