centering and making responsive a blockquote element

Question

Can somebody please show me how to make a quote that I amu sing on my website both centered and responsive so it gets smaller as the browser window does staying centered, but also so it is centered, just smaller on mobile devices.

Thank you

CSS

 blockquote {
    color: black;
    position: relative;
    display: inline-block;
    padding: 0 5px;
    margin: 0px auto;
    left:27%;
}

blockquote p {
    margin-bottom: 5px;
}

blockquote:before,
blockquote:after {
    content: "“";
    font-size: 70px;
    font-family: "Georgia", Serif;
    color: #28B701;
    position: absolute;
    left: -30px;
    top: 5px;
}

cite {
    float: right;
    color: black;
    font-size: 12px;
    margin: 0;
    padding: 0;
}

blockquote:after {
    content: "”";
    right: -30px;
    left: auto;
}

HTML

<blockquote><p style="color:#666;">Socrates said, “Know thyself.” I say, “Know thy users.” They don’t think like you do.</p><cite>- Joshua Brewer</cite></blockquote></p>

Answer 1

Since the blockquote is inline-block you can center it with text-align:center on the parent.

Remove the left statement as it's not required.

body {
    text-align: center;
}
blockquote {
     color: black;
     position: relative;
     display: inline-block;
     padding: 0 5px;
     margin: 0px auto;
 }

body {
  text-align: center;
}
blockquote {
  color: black;
  position: relative;
  display: inline-block;
  padding: 0 5px;
  margin: 0px auto;
}
blockquote p {
  margin-bottom: 5px;
}
blockquote:before,
blockquote:after {
  content: "“";
  font-size: 70px;
  font-family: "Georgia", Serif;
  color: #28B701;
  position: absolute;
  left: -30px;
  top: 5px;
}
cite {
  float: right;
  color: black;
  font-size: 12px;
  margin: 0;
  padding: 0;
}
blockquote:after {
  content: "”";
  right: -30px;
  left: auto;
}

<blockquote>
  <p style="color:#666;">Socrates said, “Know thyself.” I say, “Know thy users.” They don’t think like you do.</p><cite>- Joshua Brewer</cite>

</blockquote>