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>

score 1 · Answer 1 · answered Mar 26 '15 at 11:54

Please see snippet and let me know if issue is still there.

blockquote{
    display: block;
    max-width: 80%;
    position: relative;
    padding: 0 5px;
    margin: 0 auto;
}
blockquote:before, blockquote:after {
    content:"“";
    font-size: 70px;
    font-family:"Georgia", Serif;
    color: #28B701;
    position: absolute;
    left: -30px;
    top: 5px;
}
blockquote:after {
    content:"”";
    right: -30px;
    left: auto;
}

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

<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>

score 0 · Accepted Answer · answered Mar 26 '15 at 11:09

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>

Hi @Paulie_D thanks so much, but now that is aligned my divs do not look aligned, how to align them central too? sorry for asking another question but I can't wait an hour and a half to post again haha :) — jeff rush, Mar 26 '15 at 11:13
Unfortunately, you will have to wait as without the the code for the rest of the page it's hard to help. What you **could** do, instead of putting `text-align` on the `body` is wrap the `blockquote` in a div and put the `text-align` on that. — Paulie_D, Mar 26 '15 at 11:17
**Don't do that.** You're changing the question and possibly invalidating all the previous answers. Please remove all that extra detail and code and wait to post a new separate question. — Paulie_D, Mar 26 '15 at 11:32

score 0 · Answer 3 · answered Mar 26 '15 at 11:11

0

Simple.

blockquote{
    width:50%;
}

answered Mar 26 '15 at 11:11

Amine Zaine

165
1
21

Hi @amine250 thanks so much, but now that is aligned my divs do not look aligned, how to align them central too? sorry for asking another question but I can't wait an hour and a half to post again haha :) – jeff rush Mar 26 '15 at 11:14
Just resize your divs using percentages (%). – Amine Zaine Mar 26 '15 at 11:16

score 0 · Answer 4 · answered Mar 26 '15 at 11:11

0

blockquote {
    width: 100%;
}

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;
}

@media only screen and (min-width:768px) {
    blockquote {
        width: 500px;
        margin: 0 auto;
    }
}

answered Mar 26 '15 at 11:11

Michal Kucaj

681
5
15

Hi @Mike86 thanks so much, but now that is aligned my divs do not look aligned, how to align them central too? sorry for asking another question but I can't wait an hour and a half to post again haha :) – jeff rush Mar 26 '15 at 11:15
can you paste all of your code i cant see your antohers divs – Michal Kucaj Mar 26 '15 at 11:19

centering and making responsive a blockquote element

4 Answers4