From 29e69ed080fd43a1cc475f78aeb984cddc7ffdcd Mon Sep 17 00:00:00 2001 From: a2937 Date: Thu, 22 Jun 2023 08:44:10 -0400 Subject: [PATCH] fix(curriculum): introduce css max in accessibility-quiz (#50738) Co-authored-by: Naomi Carrigan --- .../613e275749ebd008e74bb62e.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md index c8a99c3fc93..be8ce108494 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -9,7 +9,17 @@ dashedName: step-8 A useful property of an _SVG_ (scalable vector graphics) is that it contains a `path` attribute which allows the image to be scaled without affecting the resolution of the resultant image. -Currently, the `img` is assuming its default size, which is too large. Correctly, scale the image using it's `id` as a selector, and setting the `width` to `max(100px, 18vw)`. +Currently, the `img` is assuming its default size, which is too large. CSS has a `max` function which returns the largest of a set of comma-separated values. For example: + +```css +img { + width: max(250px, 25vw); +} +``` + +In this example, `img` elements will have a minimum width of `250px`. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width. + +Scale the image using its `id` as a selector, and setting the `width` to to be the maximum of `100px` or `18vw`. # --hints--