居中并使响应成为blockquote元素

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

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> 

Answer 2

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> 

Answer 3

Simple.

blockquote{
    width:50%;
}

Answer 4

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