How to make :after pseudo element responsive

I created a WordPress site and I added a blockquote element in the about section of the homepage.

I used :before and :after to insert a qoute unicode in my blockquote element but the problem is the :after pseudo quote is not responsive.

I inserted a top: 45% right: 34% temporarily and it works only for min-width: 1200px screensize. Kindly help me to find a solution for this. Here’s my css below,

blockquote {
  display:block;
  background: #fff;
  padding: 20px 20px 20px 75px;
  margin: 0 0 20px;
  position: relative;
  width: 100%;

  /*Font*/
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 36px;
  line-height: 1.2;
  color: #242424;
}

blockquote::before{
  content: "201C"; 
  font-family: Georgia, serif;
  font-size: 100px;
  font-weight: bold;
  color: #FFC107;

  /*Positioning*/
  position: absolute;
  left: 10px;
  top: -10px;
 }

blockquote::after{
  content: "201D";
  font-family: Georgia, serif;
  font-size: 100px;
  font-weight: bold;
  color: #FFC107;

 position: absolute;
 top: 45%;
 right: 34%;
}

Also, here’s the website link to make it clear.

http://www.windoway.com.ph/

Thank you in advance guys!

Read more here: How to make :after pseudo element responsive

Leave a Reply

Your email address will not be published. Required fields are marked *