adding larger quotemarks either side of the content

  • Hi,
    I’m using this to display some client testimonials, and those testimonials have speech marks at the beginning and end of the text – I’ve attempted to set the speech marks in a span, which has the font size of 5em (text is 1.3em) however it completely blows the line spacing etc – is there a better way to add large speech marks? I did try line-height: 1em but that didn’t fix it.

    I did think that maybe an image could work but the text is different lengths and obviously will break on mobiles etc..

    any ideas at all?

Viewing 1 replies (of 1 total)
  • Plugin Author simonpedge

    (@simonpedge)

    Something like this could be done with a it of custom CSS, using absolute positioning.

    HTML:
    <p><span class='open'>"</span>Testimonial text to go here...<span class='close'>"</span></p>

    CSS:

    #SLIDER_ID .sa_hover_container p {
   width:100%;
   padding:0px 30px;
   position:relative;
   font-size:14px;
   line-height:22px;
}
#SLIDER_ID .sa_hover_container p span.open {
   position:absolute;
   top:0px;
   left:0px;
   font-size:24px;
   line-height:30px;
}
#SLIDER_ID .sa_hover_container p span.close {
   position:absolute;
   bottom:0px;
   right:0px;
   font-size:24px;
   line-height:30px;

    }`

    (NOTE: Replace ‘#SLIDER_ID’ with the CSS ID for your slider)

    • This reply was modified 2 years, 2 months ago by simonpedge.
Viewing 1 replies (of 1 total)
  • The topic ‘adding larger quotemarks either side of the content’ is closed to new replies.