Media Query

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

Aufgabe

Einfach

In dieser Lektion stellst du sicher, dass die Webseite auf verschiedenen Bildschirmgrößen gut aussieht. Verwende Media Queries, mit denen wir abhängig von der Bildschirmbreite unterschiedliche Stile anwenden können.

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

Schreibe eine CSS-Regel mit @media (max-width: 400px), um Stile anzuwenden, wenn die Bildschirmbreite 400px oder weniger beträgt.
Wähle .menu aus und setze das padding auf 10px, damit es kompakter wird.
Wähle img aus und setze die Eigenschaft float auf none, damit es auf kleineren Bildschirmen über dem Text angezeigt wird.
Setze die width von img innerhalb von .about auf 80vw, damit sie sich an kleinere Bildschirme anpasst.
Wähle den Abschnitt .contact aus und setze seine height auf auto , damit sich der Abschnitt abhängig vom Inhalt vergrößern oder verkleinern kann und alle Elemente auf verschiedenen Bildschirmgrößen richtig sichtbar und ausgerichtet bleiben.

Nachdem du diese Änderungen vorgenommen 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>