Random quote generator positioning help

Im stumped on why my left quote mark is always above the quote, rather than to the left side of the quote. I feel like this has to be some kind of simple fix i’m not seeing. any advice?

Still a WIP, but here is what I have so far. https://codepen.io/DBuckholz/pen/Zxvedb

It is because each quote from the quotesondesign API is wrapped in a p element. A p element has the display property of block and not inline like a span tag. You have two ways to deal with this. Either strip the p tags or add the following to your .quote-content CSS definition:

    p {
      display: inline;
    }
1 Like