From 9d68975bebd29209927145b412c3f3bb9c1ccea2 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Fri, 26 May 2023 14:05:18 -0700 Subject: [PATCH 1/2] Prettier --- flexbox/use-cases/media-flipped.html | 250 +++++++++++++-------------- flexbox/use-cases/media.html | 239 ++++++++++++------------- 2 files changed, 245 insertions(+), 244 deletions(-) diff --git a/flexbox/use-cases/media-flipped.html b/flexbox/use-cases/media-flipped.html index 78393a3e..46ba1496 100644 --- a/flexbox/use-cases/media-flipped.html +++ b/flexbox/use-cases/media-flipped.html @@ -1,105 +1,104 @@ - - - - Use cases: media objects - - - + - - - -
-
-
MDN logo
-
This is the content of my media object. Items directly inside the flex container will be aligned to flex-start.
-
- -
- - + -
- -
- - + +
+ +
+ + diff --git a/flexbox/use-cases/media.html b/flexbox/use-cases/media.html index 28540907..15887e7a 100644 --- a/flexbox/use-cases/media.html +++ b/flexbox/use-cases/media.html @@ -1,97 +1,97 @@ - - - - Use cases: media objects - - - + - - - -
-
-
MDN logo
-
This is the content of my media object. Items directly inside the flex container will be aligned to flex-start.
-
- -
- - + -
- -
- - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + From e65d3f5efa2640da683a0d745582eb75b41a2728 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Fri, 26 May 2023 14:19:03 -0700 Subject: [PATCH 2/2] Make image max-width visible --- flexbox/use-cases/media-flipped.html | 13 ++++++++----- flexbox/use-cases/media.html | 13 ++++++++----- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/flexbox/use-cases/media-flipped.html b/flexbox/use-cases/media-flipped.html index 46ba1496..7f3d3a31 100644 --- a/flexbox/use-cases/media-flipped.html +++ b/flexbox/use-cases/media-flipped.html @@ -27,7 +27,7 @@ } textarea:nth-of-type(1) { - height: 250px; + height: 310px; } textarea:nth-of-type(2) { @@ -56,10 +56,6 @@ margin: 5px; } - img { - max-width: 100%; - } - .media { width: 500px; border: 2px dotted rgb(96, 139, 168); @@ -74,6 +70,9 @@ } + img { + max-width: 100%; + } .media { display: flex; align-items: flex-start; @@ -92,6 +91,10 @@