Skip to content

Commit 4ecfebb

Browse files
chrisdavidmillschrisdavidmills
committed
sorting out demo sizing and fixing bugs
1 parent 2153687 commit 4ecfebb

File tree

5 files changed

+64
-19
lines changed

5 files changed

+64
-19
lines changed

‎flexbox/relationship/display-contents.html‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
}
1818

1919
textarea {
20-
height: 80px;
20+
display: block;
21+
margin-bottom: 10px;
2122
background-color: #F4F7F8;
2223
border: none;
2324
border-left: 6px solid #558ABB;
@@ -28,6 +29,14 @@
2829
font-size: 90%;
2930
}
3031

32+
textarea:nth-of-type(1) {
33+
height: 160px
34+
}
35+
36+
textarea:nth-of-type(2) {
37+
height: 160px
38+
}
39+
3140
.playable-buttons {
3241
text-align: right;
3342
width: 90%;
@@ -64,7 +73,7 @@
6473
border: 2px dotted rgb(96, 139, 168);
6574
}
6675

67-
76+
6877
</style>
6978
<style class="editable">
7079
.box {
@@ -131,12 +140,12 @@
131140
reset.addEventListener('click', function () {
132141
textareaHTML.value = htmlCode;
133142
textareaCSS.value = cssCode;
134-
fillSection();
143+
fillCode();
135144
});
136145

137146
textareaHTML.addEventListener('input', fillCode);
138147
textareaCSS.addEventListener('input', fillCode);
139148
window.addEventListener('load', fillCode);
140149
</script>
141150

142-
</html>
151+
</html>

‎flexbox/relationship/flex-layout.html‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
}
1818

1919
textarea {
20-
height: 80px;
20+
display: block;
21+
margin-bottom: 10px;
2122
background-color: #F4F7F8;
2223
border: none;
2324
border-left: 6px solid #558ABB;
@@ -28,6 +29,14 @@
2829
font-size: 90%;
2930
}
3031

32+
textarea:nth-of-type(1) {
33+
height: 160px
34+
}
35+
36+
textarea:nth-of-type(2) {
37+
height: 160px
38+
}
39+
3140
.playable-buttons {
3241
text-align: right;
3342
width: 90%;
@@ -64,7 +73,7 @@
6473
border: 2px dotted rgb(96, 139, 168);
6574
}
6675

67-
76+
6877
</style>
6978
<style class="editable">
7079
.box {
@@ -96,7 +105,7 @@
96105
display: flex;
97106
flex-wrap: wrap;
98107
}
99-
108+
100109
.box>* {
101110
flex: 1 1 200px;
102111
}
@@ -133,12 +142,12 @@
133142
reset.addEventListener('click', function () {
134143
textareaHTML.value = htmlCode;
135144
textareaCSS.value = cssCode;
136-
fillSection();
145+
fillCode();
137146
});
138147

139148
textareaHTML.addEventListener('input', fillCode);
140149
textareaCSS.addEventListener('input', fillCode);
141150
window.addEventListener('load', fillCode);
142151
</script>
143152

144-
</html>
153+
</html>

‎flexbox/relationship/floats.html‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
}
1414

1515
textarea {
16-
height: 80px;
16+
display: block;
17+
margin-bottom: 10px;
1718
background-color: #F4F7F8;
1819
border: none;
1920
border-left: 6px solid #558ABB;
@@ -24,6 +25,14 @@
2425
font-size: 90%;
2526
}
2627

28+
textarea:nth-of-type(1) {
29+
height: 120px
30+
}
31+
32+
textarea:nth-of-type(2) {
33+
height: 100px
34+
}
35+
2736
.playable-buttons {
2837
text-align: right;
2938
width: 90%;
@@ -122,12 +131,12 @@
122131
reset.addEventListener('click', function () {
123132
textareaHTML.value = htmlCode;
124133
textareaCSS.value = cssCode;
125-
fillSection();
134+
fillCode();
126135
});
127136

128137
textareaHTML.addEventListener('input', fillCode);
129138
textareaCSS.addEventListener('input', fillCode);
130139
window.addEventListener('load', fillCode);
131140
</script>
132141

133-
</html>
142+
</html>

‎flexbox/relationship/grid-layout.html‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
}
1818

1919
textarea {
20-
height: 80px;
20+
display: block;
21+
margin-bottom: 10px;
2122
background-color: #F4F7F8;
2223
border: none;
2324
border-left: 6px solid #558ABB;
@@ -28,6 +29,14 @@
2829
font-size: 90%;
2930
}
3031

32+
textarea:nth-of-type(1) {
33+
height: 100px
34+
}
35+
36+
textarea:nth-of-type(2) {
37+
height: 160px
38+
}
39+
3140
.playable-buttons {
3241
text-align: right;
3342
width: 90%;
@@ -64,7 +73,7 @@
6473
border: 2px dotted rgb(96, 139, 168);
6574
}
6675

67-
76+
6877
</style>
6978
<style class="editable">
7079
.box {
@@ -125,12 +134,12 @@
125134
reset.addEventListener('click', function () {
126135
textareaHTML.value = htmlCode;
127136
textareaCSS.value = cssCode;
128-
fillSection();
137+
fillCode();
129138
});
130139

131140
textareaHTML.addEventListener('input', fillCode);
132141
textareaCSS.addEventListener('input', fillCode);
133142
window.addEventListener('load', fillCode);
134143
</script>
135144

136-
</html>
145+
</html>

‎flexbox/relationship/writing-modes.html‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
}
1414

1515
textarea {
16-
height: 80px;
16+
display: block;
17+
margin-bottom: 10px;
1718
background-color: #F4F7F8;
1819
border: none;
1920
border-left: 6px solid #558ABB;
@@ -24,6 +25,14 @@
2425
font-size: 90%;
2526
}
2627

28+
textarea:nth-of-type(1) {
29+
height: 80px
30+
}
31+
32+
textarea:nth-of-type(2) {
33+
height: 100px
34+
}
35+
2736
.playable-buttons {
2837
text-align: right;
2938
width: 90%;
@@ -110,12 +119,12 @@
110119
reset.addEventListener('click', function () {
111120
textareaHTML.value = htmlCode;
112121
textareaCSS.value = cssCode;
113-
fillSection();
122+
fillCode();
114123
});
115124

116125
textareaHTML.addEventListener('input', fillCode);
117126
textareaCSS.addEventListener('input', fillCode);
118127
window.addEventListener('load', fillCode);
119128
</script>
120129

121-
</html>
130+
</html>

0 commit comments

Comments
 (0)