From ddf2c993f54548563eed292f882fcb18cb1914b9 Mon Sep 17 00:00:00 2001
From: The Coding Aviator <34807532+thecodingaviator@users.noreply.github.com>
Date: Sat, 9 Mar 2019 19:54:30 +0530
Subject: [PATCH] Added solution to make typography responsive challenge
 (#34289)

* Update index.md

* Add full challenge
---
 .../make-typography-responsive/index.md       | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/guide/english/certifications/responsive-web-design/responsive-web-design-principles/make-typography-responsive/index.md b/guide/english/certifications/responsive-web-design/responsive-web-design-principles/make-typography-responsive/index.md
index 996ba21f380..8d76c33ae9f 100644
--- a/guide/english/certifications/responsive-web-design/responsive-web-design-principles/make-typography-responsive/index.md
+++ b/guide/english/certifications/responsive-web-design/responsive-web-design-principles/make-typography-responsive/index.md
@@ -1,10 +1,39 @@
 ---
 title: Make Typography Responsive
 ---
+
+![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:")
+
 ## Make Typography Responsive
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/responsive-web-design-principles/make-typography-responsive/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+For viewport width use the `vw` unit.
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+> _try to solve the problem now_
+
+## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 2
+
+For the smaller viewport measurement use the `vmin` unit.
+
+> _try to solve the problem now_
+
+## Spoiler Alert!
+
+![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)
+
+**Solution ahead!**
+
+```html
+<style>
+h2 {
+      width: 80vw;
+  }
+  p {
+      width: 75vmin;
+  }
+</style>
+
+<h2>Importantus Ipsum</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
+```