Responsywne elementy

hej, mam problem z tym elementem:

dokładnie nie mogę sobie poradzić aby te dwa elementy czyli obrazek i div po prawej były ciągle w 50% czyli takie same na wielkość, oczywiście w każdej rozdzielczości ( no może nie licząc mobilnych bo to już na media query zrobie ), i druga sprawa jak zrobić aby ten tekst w divie po prawo ciągle był wyśrodkowany w poziomie (chodzi o wysokość) oczywiście na każdej rozdzielczości bo te dwa elementy mają się zmniejszać wraz z niższą rozdzielczością.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MOONSPEAK</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header class="main-header">
            <nav>
                <ul>
                    <li><a href="">PORTFOLIO</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li class="moonspeak"><a href="">MOONSPEAK</a></li>
                    <li><a href="">ARTICLES</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </nav>
            <div class="wrapper1">
                <h3 class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</h3>
            </div>
        </header>
        <main>
            <section class="first wrapper2">
                <h2>AARHUS LEJERBOLIGER</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <button class="first-button">VIEW PROJECT</button>
            </section>
            <section class="second">
                <div class="photo">
                    <a href="#" title="LOREM IPSUM"><img src="img/1.png" alt="projekt"></a>
                </div>
                <div class="photo">
                    <a href="#" title="LOREM IPSUM"><img src="img/2.png" alt="projekt"></a>
                </div>
                <div class="photo">
                    <a href="#" title="LOREM IPSUM"><img src="img/3.png" alt="projekt"></a>
                </div>
                <div class="photo">
                    <a href="#" title="LOREM IPSUM"><img src="img/4.png" alt="projekt"></a>
                </div>
                <div class="photo">
                    <a href="#" title="LOREM IPSUM"><img src="img/5.png" alt="projekt"></a>
                </div>
                <div class="photo">
                    <a href="#" title="LOREM IPSUM"><img src="img/6.png" alt="projekt"></a>
                </div>
            </section>
            <section class="third">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </section>
            <section class="fourth">
                <div class="left-img">
                    <img src="img/pic.png" alt="pic">
                </div>
                <div class="right-text">
                    <div class="container-text">
                        <div class="box-text">
                            <h5>MOONSPEAK</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div class="box-text">
                            <h5>MOONSPEAK</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div class="box-text">
                            <h5>MOONSPEAK</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </section><br><br><br><br><br><br>
        </main>
    </div>
    
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" integrity="sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
            $(window).scroll(function(){
                var top = $(window).scrollTop();
                var find_class_small = $.contains('nav', '.small');

                if(top > 100 && find_class_small == false) {
                    $('nav').addClass('small');
                }
                else {
                    $('nav').removeClass('small');
                }
            });
        });
    </script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    box-sizing: border-box;
    background-color: #efeee9;
}

.wrapper1 {
    max-width: 70%;
    margin: 0 auto;
}

.wrapper2 {
    max-width: 1110px;
    margin: 0 auto;
}

.main-header {
    background-image: url(img/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    height: 100vh;
    width: 100%;
}

nav {
    background-color: rgba(255,255,255,.8);
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 999;
}

nav > ul {
    padding-top: 70px;
    padding-bottom: 70px;
    transition: 1s;
}

nav > ul > li {
    display: inline;
    list-style: none;
    margin: 30px;
}

nav > ul > li > a {
    color: #222222;
    font-size: 1.1rem;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 5px;
}

nav.small ul {
    padding-top: 40px;
    padding-bottom: 40px;
    transition: 1s;
}

.moonspeak a {
    font-size: 2.4rem;
}

.lorem {
    max-width: 540px;
    float: right;
    margin-top: 80vh;
    text-align: right;
    font-size: 2.4rem;
    color: #333333;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.first {
    background-color: #fff;
    margin-top: 200px;
    margin-bottom: 150px;
    padding-bottom: 100px;
}

.first h2 {
    font-family: 'Roboto', sans-serif;
    color: #444444;
    font-size: 4rem;
    font-weight: 300;
    text-align: center;
    padding-top: 100px;
    padding-bottom: 50px;
}

.first p {
    font-size: 2rem;
    color: #222222;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    max-width: 730px;
    margin: 0 auto;
}

.first-button {
    width: 200px;
    height: 50px;
    border: solid 2px #000;
    background-color: #fff;
    font-weight: 700;
    font-size: 1.7rem;
    display: block;
    margin: auto;
    margin-top: 50px;
}

.first-button:hover {
    background-color: #ececec;
    transition: 0.2s;
}

.first-button:focus {
    outline: 0;
}

.second {
    max-width: 1680px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: auto;
}

.photo {
    max-width: 560px;
    max-height: 420px;
    background-color: #000;
}

.photo a { 
    position: relative; 
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.photo a:before { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    opacity: 0; 
    transition: opacity 0.25s ease-in; 
    background: rgba(0, 0, 0, 0.6); 
    content: attr(title); 
    padding: 35% 5% 0; 
    font-size: 24px; 
    text-align: center; 
    color: white; 
}

.photo a:hover:before { 
    opacity: 1; 
}

.third p {
    max-width: 790px;
    font-size: 3.6rem;
    font-weight: 100;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    margin: auto;
    padding-top: 200px;
    padding-bottom: 200px;
}

.fourth {
    justify-content: center;
    margin: auto;
    display: flex;
    flex-direction: row;
}

.left-img img {
    max-width: 100% !important;
    height: auto;
    display: block;
}

.right-text {
    max-width: 100% !important;
    height: auto;
    display: block;
    background-color: #fff;
}

.container-text {
    max-width: 40%;
    margin-left: 15%;
}

.box-text h5 {
    color: #290a59;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.4rem;
    letter-spacing: 4px;
    padding-top: 50px;
}

.box-text p {
    color: #6d6081;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.4rem;
}

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci