שאילתת מדיה

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 72 מתוך 76.

אתגר

קל

בשיעור הזה תוודאו שדף האינטרנט נראה טוב בגדלי מסך שונים. השתמשו בשאילתות מדיה, שמאפשרות לנו להחיל סגנונות שונים בהתאם לרוחב המסך.

צרו שאילתת מדיה למסכים שרוחבם קטן מ־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>