[SOLVED] Make speech marks bigger than rest of text on a Squarespace website

Make speech marks bigger than rest of text on a Squarespace website

I'm working on the Squarespace

At the bottom of the home page where there are testimonial quotations (with the pink background) I'd like to make the quotation marks bigger than the rest of the text.

I can see from going to inspect that the quotation marks are within the <span></span> tag.

If I add some custom CSS:

span {
  font-size: 200px;
  position: relative;
  top: 100px
}

Then I can get the quotation marks in around the size and position I want them, however it then creates a gap at the bottom between the last two lines of text, please see screenshot Here:

Does anyone have a solution?

Solution

Try to use pseudo-elements instead of <span>-s as follows:

figure {
    box-sizing: border-box;
    margin: 0;
    padding: 1em;
    background-color: #eca29f;
    color: #fff;
    width: 100%;
    font-family: proxima-nova;
    font-weight: 300;
    font-style: normal;
    font-size: 22px;
    letter-spacing: .015em;
    line-height: 1.6em;
    text-transform: none;
}
blockquote:before {
    content: "“";
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.1em;
    vertical-align: -0.4em;
}
blockquote:after {
    content: "”";
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.1em;
    vertical-align: -0.4em;
}

<figure>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</blockquote>
</figure>