Skip to content

Commit f8056e8

Browse files
rachelandrewrachelandrew
committed
fixing media object examples
1 parent 9699078 commit f8056e8

File tree

4 files changed

+16
-81
lines changed

4 files changed

+16
-81
lines changed

‎css-cookbook/media-objects--download.html

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,6 @@
4343
"footer image";
4444
}
4545

46-
.media>.media {
47-
grid-column-start: 2;
48-
}
49-
50-
.media-flip>.media {
51-
grid-column-start: 1;
52-
}
53-
5446
.img {
5547
grid-area: image;
5648
}
@@ -143,9 +135,7 @@
143135
<div class="content">
144136

145137
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
146-
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales
147-
tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor
148-
venenatis condimentum.</p>
138+
maximus. </p>
149139
</div>
150140

151141
<div class="footer"></div>

‎css-cookbook/media-objects-fallback--download.html

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,15 +52,6 @@
5252
"footer image";
5353
}
5454

55-
.media>.media {
56-
grid-column-start: 2;
57-
clear: both;
58-
}
59-
60-
.media-flip>.media {
61-
grid-column-start: 1;
62-
}
63-
6455
.img {
6556
float: left;
6657
margin-right: 20px;
@@ -173,9 +164,7 @@
173164
<div class="content">
174165

175166
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
176-
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales
177-
tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor
178-
venenatis condimentum.</p>
167+
maximus.</p>
179168
</div>
180169

181170
<div class="footer"></div>

‎css-cookbook/media-objects-fallback.html

Lines changed: 10 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,6 @@
4848
"footer image";
4949
}
5050

51-
.media > .media {
52-
grid-column-start: 2;
53-
clear: both;
54-
}
55-
56-
.media-flip > .media {
57-
grid-column-start: 1;
58-
}
59-
6051
.img {
6152
float: left;
6253
margin-right: 20px;
@@ -169,9 +160,7 @@
169160
<div class="content">
170161

171162
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
172-
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales
173-
tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor
174-
venenatis condimentum.</p>
163+
maximus. </p>
175164
</div>
176165

177166
<div class="footer"></div>
@@ -181,7 +170,7 @@
181170
</div>
182171
</section>
183172

184-
<textarea class="playable playable-css">
173+
<textarea class="playable playable-css" style="height: 950px;">
185174
@media (min-width: 500px) {
186175
/* clearfix*/
187176
.media:after {
@@ -208,15 +197,6 @@
208197
"footer image";
209198
}
210199

211-
.media > .media {
212-
grid-column-start: 2;
213-
clear: both;
214-
}
215-
216-
.media-flip > .media {
217-
grid-column-start: 1;
218-
}
219-
220200
.img {
221201
float: left;
222202
margin-right: 20px;
@@ -229,30 +209,24 @@
229209
margin: 0 0 0 20px;
230210
}
231211

232-
.content {
233-
grid-area: content;
234-
}
212+
.content { grid-area: content;}
235213

236-
.footer {
237-
grid-area: footer;
238-
}
214+
.footer { grid-area: footer; }
239215

240216
@supports(display: grid) {
241217
.media:after {
242218
content: none;
243-
}
244-
219+
}
245220
.img,
246221
.media-flip .img{
247222
max-width: 100%;
248-
margin: 0;
249-
250-
}
251-
}
223+
margin: 0;
224+
}
252225
}
226+
}
253227
</textarea>
254228

255-
<textarea class="playable playable-html">
229+
<textarea class="playable playable-html" style="height: 300px">
256230
<div class="media">
257231

258232
<div class="img">
@@ -313,7 +287,7 @@
313287

314288
<div class="content">
315289

316-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p>
290+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. </p>
317291
</div>
318292

319293
<div class="footer"></div>

‎css-cookbook/media-objects.html

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,6 @@
4040
"footer image";
4141
}
4242

43-
.media > .media {
44-
grid-column-start: 2;
45-
}
46-
47-
.media-flip > .media {
48-
grid-column-start: 1;
49-
}
50-
5143
.img {
5244
grid-area: image;
5345
}
@@ -140,9 +132,7 @@
140132
<div class="content">
141133

142134
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
143-
maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales
144-
tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor
145-
venenatis condimentum.</p>
135+
maximus.</p>
146136
</div>
147137

148138
<div class="footer"></div>
@@ -152,7 +142,7 @@
152142
</div>
153143
</section>
154144

155-
<textarea class="playable playable-css">
145+
<textarea class="playable playable-css" style="height: 550px">
156146
@media (min-width: 500px) {
157147
.media {
158148
display: grid;
@@ -172,14 +162,6 @@
172162
"footer image";
173163
}
174164

175-
.media > .media {
176-
grid-column-start: 2;
177-
}
178-
179-
.media-flip > .media {
180-
grid-column-start: 1;
181-
}
182-
183165
.img {
184166
grid-area: image;
185167
}
@@ -195,7 +177,7 @@
195177
}
196178
</textarea>
197179

198-
<textarea class="playable playable-html">
180+
<textarea class="playable playable-html" style="height:300px">
199181
<div class="media">
200182

201183
<div class="img">
@@ -256,7 +238,7 @@
256238

257239
<div class="content">
258240

259-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p>
241+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus.</p>
260242
</div>
261243

262244
<div class="footer"></div>

0 commit comments

Comments
 (0)