How do i make my blockquote responsive to different screen sizes?

Question

I have added a blockquote to the header of my page and am trying to make it responsive so that the text adjusts to the screen size. I would like the text to stay centered, and change size according to the browser.

I have tried changing the font size to vw unit.

 .container { width: 590px; margin: 140px auto; position: relative; } blockquote { width: 565px; font: 2.65em CallunaRegular; letter-spacing: .075em; float: left; padding: 45px 0 30px 25px; margin: 0; border-top: 2px dotted #858585; border-bottom: 2px dotted #858585; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); } .container:before { content: "“"; font-size: 13vw; position: absolute; left: -100px; color: #666; } .container:after { content: "”"; font-size: 13vw; position: absolute; right: -100px; top: 150px; color: #666; } blockquote:first-line { font: 1.85em "Sketch Block"; color: #fff79e; } blockquote:first-letter { font-size: 2.9em; text-transform: uppercase; float: left; line-height: .52em; margin-right: -18px; position: relative; z-index: 1; } blockquote strong:first-child { margin-left: 8px; letter-spacing: 0; } blockquote strong:last-child { font: 2em "Museo 700"; text-transform: uppercase; letter-spacing: 0; } blockquote em { border-bottom: 2px dotted #858585; } blockquote+b { float: right; margin-top: 10px; font: 1.6em CallunaRegular; letter-spacing: .15em; } blockquote+b:first-letter { color: #fff79e; font-size: 1.3em; font-style: italic; letter-spacing: .25em; } @-moz-document url-prefix() { blockquote:first-letter { margin-top: -29px; } }

 <div> <header> <article class="container"> <blockquote> <strong>This</strong> Is<em>Just</em> An <strong>Example</strong> </blockquote> <b>Example.</b> <a href="#About" class="down-btn">&#8595;</a> </article> </header> </div>

I expect the blockquote to resize when the browser size is changed.

Answer 1

Just change

width: 565px to 100% and add max-width: 565px .

Same goes for the container class. width: 100% and max-width: 590px .