Add Quotation Marks Around a Block

What does this code do?

This code snippet will allow you to add quotation marks before and after a block of your choice.

Code Snippets

Copy and paste this code into Design > Custom CSS

#BLOCKID::before {
  font-size: 6em;
  content: "\201C";
  position: absolute;
  vertical-align: top !important;
  left: 0;
  top: -10vw;
}

#BLOCKID::after {
  font-size: 6em;
  content: "\201D";
  position: absolute;
  vertical-align: bottom !important;
  right: 0;
}

@media only screen and (max-width:640px) {
  #BLOCKID::before {
    top: -40vw;
  }

  #BLOCKID::after {
    bottom: -80vw;
  }
}

Then edit the font-size and the top, bottom, left, and right to place them in the desired location both on desktop and mobile.

How To Use It

1. Copy and paste the code as indicated above.

2. To learn how to find a block id check out our Start Here guide.

3. Then edit the font size and top, bottom, left, and right to place the quotation marks where you like on both desktop and mobile.

Advanced

Check out the post on creating a Slideshow-Like Testimonial Section. This code could be used to create a neat effect around the testimonial block.