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

Question

[iwtbf]

Есть секция которая разделяется на две части, одна часть это скошенный контейнер с изображением и другая это текст, как разместить картинку и текст горизонтально и вертикально по середине своих секций? чтобы картинка не вылазила за границы правой части окна, помогите пожалуйста нубу, может это как-то флекса боксами можно сделать? вот что получилось на данный момент https://codepen.io/anon/pen/gWoMoK/

Answer 1

[Андрей Федоров]

Нагородили вы конечно...
https://codepen.io/aliencash/pen/GmyreY?editors=1100
Для мелких экранов сделайте медиа выражения влияющие на размер шрифта.

Comments

[Antowa Kartowa]

Черт возьми, действительно линейным градиентом все на много проще решается. Эх

[iwtbf]

ну ваще благодарочка

Answer 2

[I'm Yoda]

Так?

<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;
            }

Comments

[iwtbf]

нет, текст должен быть по бутстрап сетке горизонтально слева и по середине вертикально, синяя секция которая скошена должна занимать половину экрана и в ней картинка горизонтально и вертикально выровнена относительно родителя(скошенной секции)

[Antowa Kartowa]

iwtbf: на экранах c пропорциями ближе к квадрату разместить текст и картинку на одном уровне и чтоб они не вылазили за скос и не обрезались становиться почти невозможно при скосе в 45 градусов. На мобилке даже говорить нечего. Возможно значительно уменьшить угол. Ну так для справки

[I'm Yoda]

iwtbf: не совсем догоняю) нарисую в пеинте хотя бы)