Bootstrap 5, MediaQue. Schriftgröße anpassen

Grille

Grille

Erfahrenes Mitglied
Hallo,

ich habe über Bootstap 5 eine Webseite & auch den Slider "carousel" aufgebaut. Jede Slider-Seite hat noch einmal einen Textblock, welchen ich dann, abhängig vom Bild, gut lesbar positioniren möchte - das klappt auch sogar abhängig vo MediaQueries.

PHP: 
<!-- Slider 1 START -->
<div class="carousel-item active">

   <img src="img/Bild1.jpg" class="d-block w-100 img-fluid mx-auto" alt="erster Slide">

   <!-- Slider 1 Textbox START -->
   <div id="carouselTextBox1">
      <p class="display-4"> Hauptüberschrift </p>
      <p class="display-6"> Nebenüberschrift </p>
   </div>
   <!-- Slider 1 Textbox ENDE -->

</div>
<!-- Slider 1 ENDE -->

Mein Problem ist die Schrift:
Mit "displsy-4" wollte ich eine plakative Schrift haben. Diese sind aber für die Handy-Darstellung viel zu groß. Wenn ich jetzt versuche eine eigene Schriftgröße für einen bestimmte Mediengröße zu definieren, wird diese sogar troß "important" ignoriert.

Wie kann ich die Schriftgröße in Bootstrap überschreiben?

Vielen Dank.
 
Bei solch einem Problem ist es besser, wenn man das Ganze im Zusammenhang sieht und mit dem Seiteninspektor untersuchen kann. Poste die URL.
 
Hallo ,

hier die gesamte HTML
Natürlich ist dann noch Bootstramp eingebunden mit massenhaft viel CSS - mir geht es darum, dass ich Bootstam für die Überschrift im Slider anpassen möchte, damit ich die Schrift kleiner machen kann wenn die Webseite zb auf dem Handy sichtbar wird.

PHP: 
<!DOCTYPE html>
<html lang="de" class="l-no-horizontal-scroll">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Webeite</title>
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link href="css/all.min.css" rel="stylesheet">
    </head>
    <body>

        <!-- Header START -->
        <header class="">

            <!-- Topbar START -->
            <nav id="topbar" class="sticky-top d-flex justify-content-between bd-highlight align-items-stretch overflow-hidden">
                <div id="logoNavBox" class="py-3 px-5">
                    <a href="index.html"><img id="slogotop" src="img/Logo.svg" class="mh-100" alt=""></a>
                </div>
                <div id="Logo2" class="">
                    <a href="https://link" target="_blank"><img id="elogotop" src="img/Logo2.svg" class="" alt=""></a>
                </div>
            </nav>
            <!-- Topbar ENDE -->

            <!-- Slider DESKTOP START -->
            <div id="slidercarousel" class="carousel slide" data-bs-ride="carousel">
                <!-- Slider Indicators START -->
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#slidercarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#slidercarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#slidercarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
                    <button type="button" data-bs-target="#slidercarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
                </div>
                <!-- Slider Indicators ENDE -->

                <!-- Slider carousel START -->
                <div class="carousel-inner">

                    <!-- Slider 1 START -->
                    <div class="carousel-item active">

                        <img src="img/Bild1.jpg" class="d-block w-100 img-fluid mx-auto" alt="erster Slide">

                        <!-- Slider 1 Textbox START -->
                        <div id="carouselTextBox1">
                            <p class="display-4"> Hauptüberschrift </p>
                            <p class="display-6"> Nebenüberschrift </p>
                        </div>
                        <!-- Slider 1 Textbox ENDE -->

                    </div>
                    <!-- Slider 1 ENDE -->

                    <!-- Slider 2 START -->
                    <div class="carousel-item active">

                        <img src="img/Bild2.jpg" class="d-block w-100 img-fluid mx-auto" alt="zweiter Slide">

                        <!-- Slider 2 Textbox START -->
                        <div id="carouselTextBox2">
                            <p class="display-4"> Hauptüberschrift </p>
                            <p class="display-6"> Nebenüberschrift </p>
                        </div>
                        <!-- Slider 2 Textbox ENDE -->

                    </div>
                    <!-- Slider 2 ENDE -->

                    <!-- Slider 3 START -->
                    <div class="carousel-item active">

                        <img src="img/Bild3.jpg" class="d-block w-100 img-fluid mx-auto" alt="dritter Slide">

                        <!-- Slider 3 Textbox START -->
                        <div id="carouselTextBox3">
                            <p class="display-4"> Hauptüberschrift </p>
                            <p class="display-6"> Nebenüberschrift </p>
                        </div>
                        <!-- Slider 3 Textbox ENDE -->

                    </div>
                    <!-- Slider 3 ENDE -->

                </div>
                <!-- Slider carouse ENDE -->

                <!-- Slider Pfeile rechts und links START -->
                <button class="carousel-control-prev" type="button" data-bs-target="#slidercarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                
                <button class="carousel-control-next" type="button" data-bs-target="#slidercarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
                <!-- Slider Pfeile rechts und links ENDE -->

            </div>
            <!-- Slider DESKTOP ENDE -->
        </header>
        <!-- Header ENDE -->

        <!-- Sektion-Inhalt START -->
        <section id="Sektion-Inhalt">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 mb-5 mt-5 text-center">
                        <h2 class="mb-3 display-4">Inhalt Überschrift</h2>
                        <p>Text</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- Sektion-Leistungen ENDE -->

        <!-- Footer START -->
        <footer class="text-center"  id="Footer-Kontakt">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h2>Kontakt</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-3"></div>
                    <div class="col-3">
                        <h5>Adresse</h5>
                        <p>Firma</p>
                        <p>Straße. 11, <br/> 12345 Ort</p>
                    </div>
                    <div class="col-3">
                        <h5>Kontakt</h5>
                        <p><a href="tel:+0123456789">Telefon: 0123456789</a><br>Telefax: 0123456789</p>
                        <p><a href="mailto:info@email.de">info@email.de</a></p>
                    </div>
                    <div class="col-3"></div>
                </div>
            </div>
        </footer>
        <!-- Footer ENDE -->

        <!-- Javascript START -->
            <script src="js/jquery-3.4.1.min.js"></script> 
            <script src="js/bootstrap.bundle.js"></script>
        <!-- Javascript ENDE -->
    </body>
</html>
 
OK, werde ich mir ansehen, Bootstrap von CDN einbinden.
Code: 
<p class="display-4"> Hauptüberschrift </p>
Das "display-4", ist das eine Klasse von Bootstrap oder von dir?
 
Mit diesem CSS kann ich die Schriftgröße ohne Probleme ändern:
Code: 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/all.min.css" rel="stylesheet"> -->
    <style>
        .carousel-inner .display-4 {
            font-size: 0.5em;
        }
    </style>
Allerdings weiß ich nicht, was in "css/style.css" und "css/all.min.css" drin ist.
 
Danke für Deine Hilfe ... ich kann es leider gerade nicht prüfen.

ich habe die display-klasse von bootstrap nicht genutzt und habe eine eigene Klasse mit eigenen größen für die jeweiligen Media-Queries definiert. Dies war für mich gerade eine gute Lösung.
 
Dann wird das CSS, das ich gepostet habe, vermutlich nicht helfen, sondern man muss auch das sehen, das Du selbst definiert hast. Poste es bitte, Du kannst es auf die Klassen beschränken, dir für diese beiden Überschriften relevant sind.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück