make media block example responsive

akdetrick · Nov 5, 2017 · 01ff06f · 01ff06f
1 parent 7d336d7
commit 01ff06f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 45 deletions.
diff --git a/css-grid/advanced-media-block.html b/css-grid/advanced-media-block.html
@@ -18,15 +18,12 @@
 
 		<section>
 			<article>
-				<h1>Magical media block</h1>
-				<p>stupid grid tricks</p>
+				<h1 class="text--heading">Responsive media block</h1>
+				<p>When the viewport is large enough, the <code>bio</code> element will switch to grid layout to reposition the items</p>
 			</article>
 		</section>
 
 		<section class="stripe--white">
-			<article>
-				<h2>Column layout for small screens:</h2>
-			</article>
 			<article class="bio" itemscope itemtype="http://schema.org/Person">
 				<meta itemprop="image" content="img/dana.png"></meta>
 				<meta itemprop="brand" content="Brooklyn Resume Studio"></meta>
@@ -42,26 +39,6 @@ <h2 class="bio-title" itemprop="jobTitle">Founder &amp; Chief Creative Scribe</h
 			</article>
 		</section>
 
-		<section class="stripe--white">
-			<article>
-				<h2>Layout for larger screens:</h2>
-				<p class="text--caption">Repositioning elements with Grid</p>
-			</article>
-			<article class="bio bio--big" itemscope itemtype="http://schema.org/Person">
-				<meta itemprop="image" content="img/dana.png"></meta>
-				<meta itemprop="brand" content="Brooklyn Resume Studio"></meta>
-				<div class="bio-photo text--hide">Dana Leavy-Detrick Photo</div>
-				<hgroup>
-					<h3 class="bio-name" itemprop="name">Dana Leavy-Detrick</h3>
-					<h2 class="bio-title" itemprop="jobTitle">Founder &amp; Chief Creative Scribe</h2>
-				</hgroup>
-				<div class="bio-description" itemprop="description">
-					<p>With over 12 years of career consulting, resume writing, and recruiting expertise, Dana has advised thousands of professionals across industries like advertising, marketing, design, technology, sales, fashion, education, and entertainment in developing career strategies, resumes, and branded marketing tools that stand out in today’s market. She helps professionals break out of antiquated job search molds, and break into creative agencies, startups, corporations, and non profit organizations in the most competitive job markets in the country – so that they can reach higher levels of earning potential and career satisfaction.</p>
-					<p>She has led resume writing, personal branding, and job search strategy workshops for Boston University, Pace University, Touro College, SUNY Downstate Medical Center, the Graphic Artists Guild of America, and 3rd Ward Brooklyn. Her advice has been featured in Forbes, Vogue, MSN Careers, The New York Post, Brit+Co, Refinery29, DailyWorth, NewsDay, Thrillist, GlassDoor, and About.com.</p>
-				</div>
-			</article>
-		</section>
-
 		<section>
 			<article>
 				<p class="text--caption">github: <a href="https://github.com/akdetrick/experiments/tree/master/css-grid">akdetrick/experiments/tree/master/css-grid</a></p>

diff --git a/css-grid/css/advanced-media-block.css b/css-grid/css/advanced-media-block.css
@@ -70,24 +70,26 @@ h1, h2, h3, h4, h5, h6 {
 	text-align: left;
 }
 
-.bio--big {
-	text-align: left;
-	width: 100%;
-	display: grid;
-	grid-row-gap: 0;
-	grid-column-gap: 2rem;
-	grid-template-columns: repeat(1fr, 4);
-	grid-template-rows: repeat(auto, 2);
-	grid-template-areas:
-		"photo head head head"
-		"photo body body body";
-}
-.bio--big hgroup {
-	grid-area: head;
-}
-.bio--big .bio-photo {
-	grid-area: photo;
-}
-.bio--big .bio-description {
-	grid-area: body;
+@media (min-width: 680px) {
+	.bio {
+		text-align: left;
+		width: 100%;
+		display: grid;
+		grid-row-gap: 0;
+		grid-column-gap: 2rem;
+		grid-template-columns: repeat(1fr, 4);
+		grid-template-rows: repeat(auto, 2);
+		grid-template-areas:
+			"photo head head head"
+			"photo body body body";
+	}
+	.bio hgroup {
+		grid-area: head;
+	}
+	.bio .bio-photo {
+		grid-area: photo;
+	}
+	.bio .bio-description {
+		grid-area: body;
+	}
 }