title: Big Quotation marks styled in html css
body: <p>How would I style a quote with those huge quotation marks?</p>
  
  <p>I have tried most of the examples shown online. Using Block quote with the :before and :after css styles. The issue I'm having is avoiding the use of a image in div's wrapped around text, because of responsiveness. I'm also using the Twitter Bootstrap framework.</p>
  
  <p>The Quote in html:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;blockquote&gt;&lt;h3&gt;Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker&lt;/h3&gt;&lt;/blockquote&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>blockquote {
  border:none;
  font-family:Georgia, "Times New Roman", Times, serif;
  margin-bottom:-30px;
  }
  
  blockquote h3 {
      font-size:21px;
  }
  
  blockquote h3:before { 
      content: open-quote;
      font-weight: bold;
      font-size:100px;
      color:#889c0b;
  } 
  blockquote h3:after { 
      content: close-quote;
      font-weight: bold;
      font-size:100px;
      color:#889c0b;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/SuyaP.jpg" alt="The end result I&#39;m trying to achieve"></p>
  
  <p>The problem is getting to look like this example.Although the responsiveness does sort of work. The Quotation marks are not positioned diagonally from one another</p>