Media Query

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 72 di 76.

Sfida

Facile

In questa lezione, ti assicurerai che la pagina web abbia un bell’aspetto su schermi di diverse dimensioni. Usa le media query, che ci permettono di applicare stili diversi in base alla larghezza dello schermo.

Crea una media query per gli schermi con una larghezza inferiore a 400px. Segui i passaggi seguenti:

Scrivi una regola CSS usando @media (max-width: 400px) per applicare gli stili quando la larghezza dello schermo è di 400px o inferiore.
Seleziona .menu e imposta il suo padding su 10px per renderlo più compatto.
Seleziona img e imposta la sua proprietà float su none, in modo che si sposti sopra il testo sugli schermi più piccoli.
Imposta la width di img all’interno di .about su 80vw, in modo che si adatti agli schermi più piccoli.
Seleziona la sezione .contact e imposta la sua height su auto per permettere alla sezione di espandersi o restringersi in base al contenuto, assicurandoti che tutti gli elementi rimangano correttamente visibili e allineati su schermi di diverse dimensioni.

Dopo aver applicato queste modifiche, prova la pagina ridimensionando la finestra del browser per vedere come si adatta il layout.

Provalo tu

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