Media query

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 72 z 76.

Wyzwanie

Łatwy

Na tej lekcji zadbasz o to, aby strona internetowa dobrze wyglądała na ekranach o różnych rozmiarach. Użyj zapytań o media, które pozwalają stosować różne style w zależności od szerokości ekranu.

Utwórz zapytanie o media dla ekranów o szerokości mniejszej niż 400px. Wykonaj poniższe kroki:

Napisz regułę CSS z użyciem @media (max-width: 400px), aby zastosować style, gdy szerokość ekranu wynosi 400px lub mniej.
Wybierz .menu i ustaw jego padding na 10px, aby menu było bardziej kompaktowe.
Wybierz img i ustaw jego właściwość float na none, aby na mniejszych ekranach obraz znalazł się nad tekstem.
Ustaw width elementu img wewnątrz .about na 80vw, aby dostosowywał się do mniejszych ekranów.
Wybierz sekcję .contact i ustaw jej height na auto , aby sekcja mogła się powiększać lub zmniejszać zależnie od treści, dzięki czemu wszystkie elementy pozostaną dobrze widoczne i wyrównane na ekranach o różnych rozmiarach.

Po wprowadzeniu tych zmian przetestuj stronę, zmieniając rozmiar okna przeglądarki, aby zobaczyć, jak dostosowuje się układ.

Spróbuj swoich sił

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