0

I'm designing a responsive site which means the layout changes. When viewed as wide as possible, my blockquote wraps to the next line. I would like for it to be on the same line.

enter image description here

I have managed to fix the open quote by adding some text-indent however I'm unable to move the close quote.

My HTML:

<blockquote><p class="blockQuote">In recent years we have noticed a growth in demand for audit services, by enterprises with foreign investment, partly because of the demands on the part of organizations such as the CPI and the central bank.</p></blockquote>

CSS:

blockquote  {
    font-family: serif;
    font-style: italic;
    color: #000;
    margin: 0px 0px 10px 0px;
}

blockquote:before   {
    content: "\201C";

}

blockquote:after    {
    content: "\201D";

blockquote:before   {
        position: absolute;
        width: 60px;
        height: 60px;
        line-height: 1;
        font-size: 120px;
    }

    blockquote:after    {
        position: absolute;
        width: 60px;
        height: 60px;
        line-height: 1;
        font-size: 120px;
    }

When I use a span element, the close quote fixes but the open quote looks like it should move further up.

enter image description here

HubCap
  • 323
  • 5
  • 14

1 Answers1

1

Add <span> tag instead of <p> tag. Working JSFiddle here https://jsfiddle.net/jfmf4ujc/

  • I used the span element which fixed the close quote but open quote has gone out of alignment. How do I fix this? (Added the image in the original post) – HubCap Feb 23 '16 at 09:44
  • Did you add any extra css apart from the css posted in the question? For me using a span element works fine. If you have used any extra css, please add that to the question. So that I can have a look. –  Feb 23 '16 at 10:17