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

question-closed Bootstrap 4.6 - problem z containerem na wersji mobilnej strony

VPS Starter Arubacloud
0 głosów
57 wizyt
pytanie zadane 13 stycznia 2023 w HTML i CSS przez kingkushlee Gaduła (3,960 p.)
zamknięte 14 stycznia 2023 przez kingkushlee

Cześć, mam takie kody:

<section class="subhero pt-4">
    <div class="container">
        <div class="row">
            <div class="col-md-6 laptops_image pr-md-5">
                <img src="img/laptops.png" alt="" class="img-fluid">
            </div>
            <div class="col-md-6 position-relative">
                <div class="subhero_text position-absolute pl-md-5">
                    <h2>Lorem ipsum</h2>
                    <div class="rectangle_orange"></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elementum lectus enim, in eleifend ipsum varius ut. </p>
                </div>
            </div>
        </div>
    </div>
</section>

i CSS:

.subhero {
    background: #EFA99F;
}
 
.subhero .subhero_text h2 {
    font-weight: 600;
    font-size: 3.4rem;
    color: #021483;
}
 
.subhero .subhero_text p {
    font-weight: 500;
    font-size: 1.5rem;
    color: #021483;
}
 
.subhero .subhero_text {
    left: 0;
    top: 30%;
}
 
.laptops_image img {
    width: 100%;
    height: 100%;
}

Problem pojawia się, gdy testuje stronę na urządzenia mobilne, wtedy tekst z subhero "wychodzi" z containera i się nie pokazuje (nie umiem dobrze opisać problemu, więc zrobiłem rysunek poglądowy: https://imgur.com/a/XK7dicv). Z góry dziękuję za pomoc.

komentarz zamknięcia: Rozwiązano, działo się tak, ponieważ .subhero_text miało position: absolute;

Podobne pytania

0 głosów
1 odpowiedź 325 wizyt
pytanie zadane 13 października 2017 w HTML i CSS przez Q_Nick Mądrala (5,010 p.)
0 głosów
2 odpowiedzi 590 wizyt
pytanie zadane 17 lipca 2017 w HTML i CSS przez leemish Użytkownik (780 p.)
+1 głos
1 odpowiedź 148 wizyt

92,416 zapytań

141,222 odpowiedzi

318,985 komentarzy

61,831 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...