Skip to main content

INFO 1300: Additional Responsive Considerations

Class 13: Additional Responsive Considerations​


  • Media Queries for Accessibility (& Touch)
  • Responsive Images
  • Additional Flexbox Properties
  • Single-Page Websites & Document Fragment Links

Copyright 2026, Kyle J. Harms

Review: Media Queries​

Media queries allow you to apply different CSS rules based on the characteristics of the user's device.

nav menu {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
@media (min-width: 700px) {
  nav menu {
    flex-direction: row;
  }
}

Review: Testing Responsiveness​

✔️ Resize browser window

  • Always accurate
  • Great for checking responsiveness!

❌ Dev Tools: Responsive Design Mode

  • Helpful for checking specific/popular devices
  • Bad for testing usable content for all screen sizes

Review: Responsive Breakpoints​

Any time the presentation of your content changes to keep the content usable, you have a responsive breakpoint.

Responsive Breakpoint ≠ Media Query Breakpoint

Sometimes, a responsive breakpoint is the same as a media query breakpoint, but not always.

Additional Responsive Considerations​

Media Queries for Accessibility​

  • (prefers-reduced-motion: reduce) Minimize non-essential motion and animation.
  • (prefers-contrast: more) or (prefers-contrast: less) Increase or decrease contrast for better readability.
  • (prefers-color-scheme: dark) Switch to a dark theme for better visibility in low-light environments.

Activity: Dark Mode​

In the activity codespace, add a media query to change the website's theme when the user prefers a dark color scheme.

@media (prefers-color-scheme: dark) {
  /* TODO: Add CSS rules to change the website's theme to dark mode. */
}

GitHub Copilot​

GitHub Copilot is a code completion and programming AI-assistant.

Walkthrough: GitHub Copilot & Dark Mode​

Caution: AI Assistants​

AI assistants make mistakes.

In the industry, expert programmers evaluate AI output and modify it to ensure correctness.

You have learned the foundational principles of static front-end web development, so that you have the knowledge to evaluate AI output and modify it to ensure correctness.

Use your knowledge to use AI responsibly and effectively; never blindly accept AI output as correct.

Review: "Clickable/Tappable" Area​

  • A finger is less precise compared to a mouse/trackpad.
  • "Touch" requires larger "clickable" targets.

Media Queries for "Touch"​

@media (pointer: coarse) {
  /* TODO: CSS to make "tappable" areas larger. */
}
FeatureCommon Devices
pointer: coarseTouchscreens (phones, tablets)
pointer: fineMouse, trackpad

Activity: Large "Tappable" Areas​

In the activity codespace, increase the tappable area of the "See the Animals" button.

@media (pointer: coarse) {
  /* TODO: CSS to make "tappable"
     areas larger. */
}

Demo: Responsive Design Mode​

Note: Firefox shown; Chrome's icon is in the top-left corner of Dev Tools.

Responsive Design Mode: Simulate Touch​

Note: Firefox shown; Chrome simulates touch by default in Dev Tools.

Responsive Images​

Depending on the screen size, you may want to load different images or change the shape of the images.

Tip: Preserve Aspect Ratio and Prevent Overflow​

Adding a block-size: auto tells the browser to preserve your images' aspect ratio when resizing them.

max-inline-size: 100% declares that images can never be rendered at a size wider than their containing element.

img {
  max-inline-size: 100%;
  block-size: auto;
}

Responsive Images: <picture> vs. object-fit​

There are two primary methods for responsive images:

<picture> and srcset​

Use this method when you have multiple image files, and you want to load different images using media queries.

object-fit and object-position​

Use this method when you have one image file, and you want to change how the image is cropped or resized using media queries.

<picture> and srcset​

Requirements: multiple image files.

<picture>
  <source srcset="images/mcgraw-tower-portrait.jpg" media="(min-width: 500px)">
  <img src="images/mcgraw-tower-landscape.jpg" alt="McGraw Tower">
</picture>

Note: You can add a <source> element for every responsive breakpoint of your content.

Demo: <picture> and srcset​

object-fit and object-position​

Use to change how the image is cropped or resized.

object-fit and object-position​

Requirements: one image file.

img {
  /* make image square */
  aspect-ratio: 1;

  /* fill container with image */
  object-fit: cover;

  /* align image to top left */
  object-position: top left;

  /* fill container */
  width: 100%;
}

Reference Documentation:​

Review the reference documentation for employing these properties:

More Flexbox​

flex-basis, flex-grow, and flex-shrink​

flex-basis is the initial size of a child element before it is placed in a flexbox container.

flex-grow is the ability for a child to grow.

flex-shrink is the ability for a child to shrink.

nav menu li {
  flex-basis: 200px; /* initial size of child element */
  flex-grow: 1; /* allow flex item to grow */
  flex-shrink: 1; /* allow flex item to shrink (default) */
}

Shorthand: flex​

flex is a shorthand property for flex-grow, flex-shrink, and flex-basis.

flex​

nav menu li {
  flex: 1 1 200px;
}

Equivalent to:​

nav menu li {
  flex-basis: 200px;
  flex-grow: 1;
  flex-shrink: 1;
}

Flexbox Alignment​

Use the reference documentation to utilize these Flexbox properties:

  • gap
  • justify-content
  • align-content
  • align-items
  • align-self
  • order
  • flex-wrap

Single-Page Websites​

Single-Page Websites​

A website that consists of a single HTML page with multiple sections that users can navigate to by clicking links in a navigation menu.

When clicked, the links scroll the user to a specific section of the page.

A document fragment link is a link that points to a specific element within the same webpage.

<section id="section-name">
  <h2>Section Title</h2>
  <p>Section content goes here.</p>
</section>
<a href="#section-name">Jump to Element</a>

When the user clicks Jump to Element, the browser scrolls to the element with the ID section-name.

On your handout, plan the document fragment links for the Apple Harvest Festival website.

<section id="section-name">
  <h2>Section Title</h2>
  <p>Section content goes here.</p>
</section>
<a href="#section-name">Jump to Section</a>

What's Next?​

Friday (10/9) - Quiz 5 Online Only (Sections Canceled)

Monday (10/12) - No Class (Fall Break)

Wednesday (10/14) - Class 14: Exam II Q&A (Optional)

Thursday (10/15) - (Big) Homework 7 Due

Monday (10/19) - Class 15: Exam II

Last updated on