title: how to make my font size responsive?
body: <p>I'm trying to make some big title responsive.  I tried a few things such as: this <a href="https://css-tricks.com/viewport-sized-typography/" rel="nofollow">Link</a>. But it didn't work.</p>
  
  <p>CSS</p>
  
  <pre><code>body {
      margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigationchanges. */  
  }
  
  
  #page-wrap {
  
    width: 760px;
    margin: 0 auto;
  }
  
  .title {
      font-family: Brush Script MT,cursive;
      font-size: 10vw;
      font-style: normal;
      font-variant: normal;
      font-weight: 500;
  
  }
  
  #welcome {
      @extend .title;   
  }
  
  #to {
      @extend .title;
      text-align: center;
      font-size: 50px;   
  }
  
  #mp{
      @extend .title;
      text-align: right;
  
  }
  
  
  .full { 
     background-image: url('../img/beach-bg1920-1080.jpg');
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     background-size: cover;
     -o-background-size: cover;
  
  }
  
  
  
  /*******navbar elements *********/
  .navbar-inner {
      background:transparent;
      border: solid#ffffff 2px;
  }
  
  .nav &gt; li &gt; a:focus, .nav &gt; li &gt; a:hover {
      text-decoration: none;
      background-color: $hover-color;
  }
  .navbar-nav &gt; li &gt; a {
      padding-top: 15px;
      padding-bottom: 15px;
      color: white;
  }
  
  .navbar &gt; .container .navbar-brand, .navbar &gt; .container-fluid .navbar-brand {
      margin-left: -15px;
      color: #ffffff;
  }
  .navbar-brand:focus, .navbar-brand:hover {
      text-decoration: none;
  }
  
  /*******navbar elements End *********/
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div id="page-wrap"&gt;           
          &lt;h1 id="welcome"&gt;Welcome!&lt;/h1&gt;
          &lt;h2 id="to"&gt;to&lt;/h2&gt;
          &lt;h1 id="mp"&gt;My Portfolio!&lt;/h1&gt;
      &lt;/div&gt;  
  </code></pre>
  
  <p>You can't see the word "My portfolio".  i am trying to move everything to the left. in other words, I just want to make sure that this is going to look alright on mobile devices.  </p>