From 435ca5462a855b946f5adb246cc36c6aae28a34c Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 19 Dec 2024 23:39:36 +0800
Subject: [PATCH] Add info about element properties to make pride flag
 background visible

---
 .../snippets/disability-pride-flag-background.md       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/projects/snippets/disability-pride-flag-background.md b/src/projects/snippets/disability-pride-flag-background.md
index e2c322ee..061d0eff 100644
--- a/src/projects/snippets/disability-pride-flag-background.md
+++ b/src/projects/snippets/disability-pride-flag-background.md
@@ -16,11 +16,9 @@ I have used JavaScript to set up the header of the main part of this website, so
 Since Ann Magill released the Disability Pride flag to the public domain under [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/), I am doing the same to my responsive Disability Pride flag CSS background. Therefore, you are free to use my code and do what you want with it without asking for permission or crediting me.
 
 ## Demo
+{% set demoHeight = "23rem" %}
 {%- css %}
-.flag-disability.demo {
-    width: 100%;
-    height: 20rem;
-}
+.flag-disability.demo { height: {{ demoHeight }}; }
 {% endcss %}
 
 <div class="flag-disability demo" role="img" aria-label="Demo of the Disability Pride flag coded in CSS"></div>
@@ -45,4 +43,6 @@ CSS:
 }
 ```
 
-After copying the above snippet in a CSS stylesheet or the HTML `<style>` tags, to apply the background to an HTML element, simply add the CSS class name `disability-pride-flag` (you can rename the class name if you want) to the HTML element's `class` attribute.
\ No newline at end of file
+After copying the above snippet in a CSS stylesheet or the HTML `<style>` tags, to apply the background to an HTML element, simply add the CSS class name `disability-pride-flag` (you can rename the class name if you want) to the HTML element's `class` attribute.
+
+Note that you want to apply the Pride flag to an empty element, you also need to set the element's [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height) or [`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) property to make the Pride flag background visible. For example, the demo above sets the `height` property to {{ demoHeight }}.
\ No newline at end of file