tod
/
odin-default-css-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #322 from linglejack06/main 

05-Flex Modal: add comments and hints to solution files
This commit is contained in:
Cody Loyd 2023-06-08 14:00:26 -05:00 committed by GitHub
parent cc6eec73e7 8730075a63
commit 4eea74d31f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
flex/05-flex-modal/README.md
View File

@ -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. 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 ### 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 ## Desired outcome

2
flex/05-flex-modal/solution/solution.css
View File

@ -80,7 +80,7 @@ button.cancel {
/* this keeps the icon from getting smashed by the text */ /* this keeps the icon from getting smashed by the text */
flex-shrink: 0; flex-shrink: 0;
} }
/* header container should be wrapped around the button element as well in order for flex style to work */
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;

2
flex/05-flex-modal/solution/solution.html
View File

@ -10,7 +10,9 @@
<body> <body>
<div class="modal"> <div class="modal">
<div class="icon">!</div> <div class="icon">!</div>
<!-- additional container used here -->
<div class="container"> <div class="container">
<!-- header div was moved to encompass the close button as well -->
<div class="header">Are you sure you want to do that? <div class="header">Are you sure you want to do that?
<button class="close-button">✖</button> <button class="close-button">✖</button>
</div> </div>