Problem z rozszerzaniem się strony i centrowaniem sekcji

Question

Witam raz jeszcze. Mam nadzieję, że już ostatni

Problem dotyczy rozszerzania się strony po dodaniu czegokolwiek z height. Mam pierwszą sekcję, która ma 70vh i do tego momentu wszystko jest ok. W następnej chciałbym dodać zdjęcie i obok tekst. Sam tekst tego nie powoduje, ale zdjęcie obok, albo obojętnie jaki div z height już tak. Jest to rozjechanie o kilka px. Problem jest o tyle dziwny, bo na wersji mobilnej tego nie ma. Dołączę screeny, żeby to zobrazować.

Drugie pytanie dotyczy transform: translate. Na wersji mobilnej centruje ona daną sekcję, a na wersji dużej już nie. Dlaczego tak się dzieje? Będę wdzięczny za wszelkie podpowiedzi. 

<section class="about">
        <h1>name</h1>
        <div class="info">
            <img src="..//Nowy folder/img/woman.jpg" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, illum adipisci asperiores iusto
                ullam rerum molestiae officia aspernatur illo omnis quas magnam aliquam, nisi molestias. Aut tempora
                voluptate delectus modi facere repellendus voluptatum non sed temporibus sapiente, illo, animi natus
                at
                necessitatibus praesentium error eligendi. Qui corrupti iste molestias recusandae ipsum obcaecati
                unde
                officia, tempore laborum. Amet facere numquam voluptates tempore, eveniet quasi deleniti doloremque,
                quos assumenda totam tenetur eum odit rerum vero exercitationem voluptatum accusantium quisquam, ad
                dolor deserunt. Adipisci possimus esse cum ipsam soluta quidem, voluptates quasi eius. Nostrum at
                fugiat
                dignissimos laborum nulla odio fugit doloremque tempora!</p>
        </div>
    </section>

/* ABOUT */

.about {
    position: absolute;
    width: 90%;
    transform: translate(5%, 0);
    top: 85vh;
}

.about h1 {
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about img {
    width: 100%;
}

.about p {
    text-align: justify;
    font-family: 'Roboto', sans-serif;
}

@media (orientation: landscape) {
    .about {
        margin-top: 50px;
    }
}

@media(min-width: 1025px) {
    .about {
        width: 70%;
        transform: translate(15%, 0);
    }

    .about h1 {
        font-size: 40px;
    }

    .about div {
        display: flex;
    }

    .about div p {
        font-size: 20px;
    }

}

 

Answer 1

Jest to rozjechanie o kilka px

Nie rozumiem o co chodzi.

A jeżeli chodzi centrowanie za pomocą transform to "trik" wyglada tak 

.about {
    position: absolute;
    width: 90%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%,0) 
}

 

Comments

Nie wiedziałem jak dokładnie wytłumaczyć to poszerzanie się strony. Wygląda to tak, jakby coś się pojawiało poza widocznym oknem przeglądarki. Zaznaczyłem to na screenie, żeby trochę rozjaśnić problem.

---

coś się pojawiało poza widocznym oknem przeglądarki

Jest tak jak piszesz. Musisz znaleźć przyczynę za pomocą devtools jeżeli nie domyślasz się co to jest.

---

aside, które jest wyjeżdżającym menu na wersji mobilnej rozwalało stronę powyżej 1024px. Dałem width: 100% i wszystko jest w porządku. Problem rozwiązany