Media Query

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 72 из 76.

Задание

Легко

В этом уроке вы позаботитесь о том, чтобы веб-страница хорошо выглядела на экранах разных размеров. Используйте media queries (медиазапросы), которые позволяют применять различные стили в зависимости от ширины экрана.

Создайте медиазапрос для экранов с шириной меньше 400px. Выполните следующие шаги:

Напишите CSS-правило, используя @media (max-width: 400px), чтобы применять стили, когда ширина экрана составляет 400px или меньше.
Выберите селектор .menu и установите для него padding значение 10px, чтобы сделать его более компактным.
Выберите селектор img и установите для его свойства float значение none, чтобы на маленьких экранах изображение переместилось выше текста.
Установите width для img внутри .about значение 80vw, чтобы оно подстраивалось под маленькие экраны.
Выберите селектор для секции .contact и установите для её свойства height значение auto, чтобы секция могла расширяться или сжиматься в зависимости от контента, гарантируя, что все элементы останутся видимыми и правильно выровненными на экранах разных размеров.

После внесения этих изменений протестируйте свою страницу, изменяя размер окна браузера, чтобы увидеть, как адаптируется макет.

Попробуйте сами

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