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

update solution files to show changes in divs

This commit is contained in:
Jack Lingle 2023-06-03 13:30:05 -04:00
parent 07e096da6c
commit af08d0a39b
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 button too 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>