Media Query

Part of the Styling with CSS section of Coddy's HTML journey — lesson 72 of 76.

Challenge

Easy

In this lesson, you will ensure that the webpage looks good on different screen sizes. Use media queries, which allow us to apply different styles based on the screen width.

Create a media query for screens with a width smaller than 400px. Follow the steps below:

Write a CSS rule using @media (max-width: 400px) to apply styles when the screen width is 400px or smaller.
Target the .menu and set its padding to 10px to make it more compact.
Target the img and set its float property to none so that it moves above the text on smaller screens.
Set the width of the img inside .about to 80vw so it adjusts to smaller screens.
Target the .contact section and set its height to auto to allow the section to expand or shrink based on the content, ensuring that all elements remain properly visible and aligned on different screen sizes.

After applying these changes, test your page by resizing the browser window to see how the layout adjusts.

Try it yourself

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