Media Query

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 72 von 76.

Aufgabe

Einfach

In dieser Lektion wirst du sicherstellen, dass die Webseite auf verschiedenen Bildschirmgrößen gut aussieht. Verwende media queries, die es uns ermöglichen, unterschiedliche Stile basierend auf der Bildschirmbreite anzuwenden.

Erstelle eine Media Query für Bildschirme mit einer Breite kleiner als 400px. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel mit @media (max-width: 400px), um Stile anzuwenden, wenn die Bildschirmbreite 400px oder kleiner ist.
Targetiere die .menu und setze ihr padding auf 10px, um sie kompakter zu machen.
Targetiere das img und setze seine float-Eigenschaft auf none, damit es auf kleineren Bildschirmen über den Text verschoben wird.
Setze die width des img innerhalb von .about auf 80vw, damit es sich an kleinere Bildschirme anpasst.
Targetiere den .contact-Bereich und setze seine height auf auto, damit sich der Bereich basierend auf dem Inhalt ausdehnen oder verkleinern kann, um sicherzustellen, dass alle Elemente auf verschiedenen Bildschirmgrößen ordnungsgemäß sichtbar und ausgerichtet bleiben.

Nachdem du diese Änderungen angewendet hast, teste deine Seite, indem du die Größe des Browserfensters änderst, um zu sehen, wie sich das Layout anpasst.

Probier es selbst

<html>
    <head>
        <title>Swim with Whales in Tonga</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">  
    </head>
<body>
    <nav class="menu">
        <a href="#about">About</a>
        <a href="#experience">Experience</a>
        <a href="#contact">Contact</a>
    </nav>    
    <header class="welcome">
        <h1>Swim with Whales in Tonga</h1>
        <p>Experience the magic of swimming alongside majestic humpback whales.</p>
    </header>    
    <section class="about">
        <h2>About Tonga</h2>
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Hawaiian_Islands_Humpback_Whale_National_Marine_Sanctuary_breaching_2018.png">
        <p>Tonga is a stunning Polynesian archipelago in the South Pacific, famous for its crystal-clear waters and vibrant marine life. From July to October, humpback whales migrate here to breed, offering a rare chance to swim with these gentle giants. Beyond whale encounters, Tonga boasts pristine beaches, lush tropical landscapes, and a rich cultural heritage. Visitors can explore traditional villages, experience authentic Tongan hospitality, and enjoy activities like snorkeling, diving, and sailing. Whether you're seeking adventure or relaxation, Tonga provides an unforgettable escape into nature’s beauty.</p>
    </section>      
    <section class="contact">
        <h2>Plan Your Adventure</h2>
        <table>
            <tr>
                <td>Phone Number</td>
                <td>+676 123 4567</td>
            </tr>
            <tr>
                <td>Email</td>
                <td>info@tongawhales.com</td>
            </tr>
        </table>
    </section>
</body>
</html>