» CS 347: Lab 10 – Media Queries

CS 347: Lab 10 – Media Queries

September 29, 2020 by Chris Johnson. Filed under fall-2020, labs, webdev.

Welcome to lab. By now you have already watched the lecture videos on your own. Now we will apply the ideas from those videos in a handful of exercises, which you will complete in small groups.

Within your breakout room, designate one of your team to be the screen sharer. Screen sharer, share your screen and claim your group’s task on Crowdsource. Make sure to enter every group member’s JMU eID so that they receive credit. Your group will be assigned a task number.

Team, complete the assigned task below. Screen sharer, be careful not to dominate. All members should contribute ideas.

Task

Reverse engineer the following page using an internal stylesheet:

Use media queries to provide conditional styles. Observe what disappears and what resizes as the viewport changes size. Use images from Lorem Picsum using URLs of the form https://picsum.photos/WIDTH/HEIGHT.

Screen sharer, when your group is done or when time is up, submit your group’s solution on Crowdsource.

Reference Implementation

ref.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Queries</title>
  <link rel="stylesheet" href="ref.css">
</head>
<body>
  
  <div id="root">
    <nav>
      <ul>
        <li>#lorem</li>
        <li>#recusandae</li>
        <li>#ullam</li>
        <li>#cupiditate</li>
        <li>#sequi</li>
        <li>#commodi</li>
        <li>#mollitia</li>
        <li>#rem</li>
        <li>#sapiente</li>
        <li>#minima</li>
      </ul>
    </nav>

    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab totam amet quibusdam consequatur pariatur rerum vero? Adipisci totam iste suscipit fugit saepe ea. Impedit nam nisi itaque officia vel sed.</p>
    <figure>
      <img src="https://picsum.photos/600/200">
      <figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, ducimus!</figcaption>
    </figure>
    <p>Itaque magni sed error aspernatur quisquam unde ex nesciunt optio obcaecati corporis inventore quo dolores, corrupti totam, delectus laborum voluptas soluta expedita velit molestiae neque harum aliquid? Omnis, iure et?</p>
    <p>Harum repellendus dicta reprehenderit atque quo. Amet, deserunt velit, ipsa blanditiis fugit, aut nisi molestias obcaecati laboriosam nobis nesciunt ullam? Blanditiis ducimus nisi doloremque accusantium quasi at voluptas, illum velit!</p>
    <p>Ratione dolor adipisci quisquam, debitis sequi impedit hic, tempore commodi ducimus nesciunt esse provident omnis laudantium molestias veniam cupiditate! Sit, asperiores est numquam ad quis omnis quia rem. Expedita, reprehenderit!</p>
    <p>Iste, itaque. Illo minima, vel distinctio dolore debitis repellat quidem laudantium omnis voluptatibus repellendus tenetur alias quod soluta pariatur ipsa nobis nemo nam commodi dicta doloribus autem sunt quisquam molestiae!</p>
    
    <figure>
      <img src="https://picsum.photos/600/300">
      <figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis unde aspernatur sapiente maxime ducimus porro.</figcaption>
    </figure>

    <p>Optio, aperiam. In harum aut magni obcaecati possimus aliquam sunt deserunt tenetur repellendus, enim dicta ipsum et repellat laudantium, at fugiat odio dolores voluptates expedita consequatur sequi dignissimos facilis cupiditate?</p>
    <p>Voluptatibus nihil officia voluptates id itaque unde dolorum esse adipisci laudantium recusandae nesciunt omnis explicabo distinctio debitis numquam atque iure, possimus quae culpa? Odit nihil rem praesentium ut doloribus laudantium.</p>
    <p>Fuga tempora eveniet odio ullam minus sint quidem, magni doloribus dignissimos quas aliquam quam cumque enim, dolores consequatur? Repellendus culpa natus ullam necessitatibus nobis in exercitationem quidem a commodi error!</p>
    <p>Velit amet ipsum asperiores sit magni ex quidem culpa facere animi enim doloribus aperiam aspernatur recusandae a repellendus sunt quae nam labore ducimus neque minima, aliquam cumque nulla officiis! Aut?</p>
    <p>Minus, accusamus corporis! At, ab! Pariatur accusamus possimus consequatur perferendis, quibusdam omnis at deserunt. Eius harum magnam voluptas cupiditate delectus eos libero in! Sint cupiditate natus, impedit tempore ab animi!</p>
  </div>

</body>
</html>

ref.css

body {
  margin: 0;
  background-color: #69B6F4;
}

#root {
  width: 800px;
  border-left: 3px solid black;
  border-right: 3px solid black;
  background-color: #B1D5F2;
  margin: 0 auto;
  padding: 10px;
  min-height: 100vh;
  box-sizing: border-box;
  font-size: 1.2em;
}

figure {
  width: 600px;
  margin: 0 auto;
}

h1 {
  font-family: sans-serif;
}

figcaption {
  font-family: sans-serif;
  font-size: 0.9em;
}

nav > ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}

nav > ul > li {
  font-size: 1.2em;
  padding: 10px;
  background-color: #69B6F4;
  margin: 0 10px 10px 0;
  border-radius: 10px;
  font-family: sans-serif;
}

@media (max-width: 820px) {
  #root {
    width: 100%;
    border: none;
  }

  figure {
    width: 100%;
  }

  figure > img {
    width: 100%;
  }
}

@media (max-width: 500px) {
  nav > ul {
    flex-direction: column;
  }
}