diff --git a/flex/05-flex-modal/README.md b/flex/05-flex-modal/README.md index 9f8b55d..1b89892 100644 --- a/flex/05-flex-modal/README.md +++ b/flex/05-flex-modal/README.md @@ -2,7 +2,7 @@ This one is another very common pattern on the web. The solution to this one is _simple_... but it might not be immediately obvious to you. You'll need to edit the HTML a bit to get everything where it needs to be. ### A hint -Depending on how you approach this one, you might need to revisit the `flex-shrink` property to keep a flex item from getting smashed. +Depending on how you approach this one, you might need to revisit the `flex-shrink` property to keep a flex item from getting smashed. In addition, pay attention to the structure of the html, specifically look into adding an additional container surrounding the header, button, main text, cancel, and continue divs; and look into moving the header div to encompass the button as well. ## Desired outcome diff --git a/flex/05-flex-modal/solution/solution.css b/flex/05-flex-modal/solution/solution.css index cc353e9..a50ab4a 100644 --- a/flex/05-flex-modal/solution/solution.css +++ b/flex/05-flex-modal/solution/solution.css @@ -80,7 +80,7 @@ button.cancel { /* this keeps the icon from getting smashed by the text */ flex-shrink: 0; } - +/* header container should be wrapped around button too in order for flex style to work */ .header { display: flex; align-items: center; diff --git a/flex/05-flex-modal/solution/solution.html b/flex/05-flex-modal/solution/solution.html index 1c1f3cb..09385bf 100644 --- a/flex/05-flex-modal/solution/solution.html +++ b/flex/05-flex-modal/solution/solution.html @@ -10,7 +10,9 @@
!
+
+
Are you sure you want to do that?