• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Problem z rozszerzaniem się strony i centrowaniem sekcji

Aruba Cloud - Virtual Private Server VPS
0 głosów
153 wizyt
pytanie zadane 9 listopada 2020 w HTML i CSS przez c3cylone Nowicjusz (180 p.)
zamknięte 11 listopada 2020 przez c3cylone

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

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

}

 

komentarz zamknięcia: problem rozwiązany

1 odpowiedź

0 głosów
odpowiedź 9 listopada 2020 przez pablop76 VIP (123,540 p.)

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

 

komentarz 9 listopada 2020 przez c3cylone Nowicjusz (180 p.)

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.

komentarz 9 listopada 2020 przez pablop76 VIP (123,540 p.)

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.

komentarz 11 listopada 2020 przez c3cylone Nowicjusz (180 p.)

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 smiley

Podobne pytania

0 głosów
1 odpowiedź 267 wizyt
0 głosów
2 odpowiedzi 285 wizyt
pytanie zadane 19 listopada 2016 w HTML i CSS przez BlvckFox Gaduła (4,240 p.)
0 głosów
2 odpowiedzi 235 wizyt
pytanie zadane 20 września 2017 w HTML i CSS przez mola85 Początkujący (320 p.)

93,327 zapytań

142,323 odpowiedzi

322,397 komentarzy

62,658 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...