htmlcssresponsive-designresponsiveblockquote

How to align responsively blockquote element with <p> block of text

I have been having a hard time with making the closing quotation mark appear at the end of my quote text. Im attaching picture of how it is and how I would like to make it. Picture of alignment

How can make the closing quotation mark appear at the end of the text?

blockquote {
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  width: 500px;
  margin: 0.25em 0;
  padding: 0.25em 40px;
  line-height: 1.45;
  position: relative;
  color: #616161;
}

blockquote:before {
  display: block;
  content: "\201C";
  font-size: 80px;
  position: absolute;
  left: -20px;
  top: -20px;
  color: #7a7a7a;
}

blockquote:after {
  display: block;
  content: "\201D";
  font-size: 80px;
  position: inherit;
  color: #7a7a7a;
  margin: 0;
  padding: 0;
}

blockquote cite {
  color: #999999;
  font-size: 14px;
  display: block;
  margin-top: 5px;
}

blockquote cite:after {
  content: "\2019 \2009";
}

blockquote cite:before {
  content: "\2014 \2009";
}
<div class="w3-quarter w3-container">
  <img src="Images/pfp.png" alt="PFP" style="width:100%; height:100%; object-fit: contain;">
</div>
<div class="w3-threequarter w3-container">
  <blockquote style="width:auto;">
    <p style="text-align:justify;">
      Vážení spoluobčania, <br> Vitajte na stránke SIRIUS. <br> Kolektív SIRIUS sa podujal vytvoriť ju po prvých podujatiach 22. 8. 2022 a 24.8.2022. všetky vaše otázky a podnety – stanete sa spolutvorcami nového SIRIUSu. <br> <br>
  </blockquote>
  Tešíme sa na stretnutie, <br> Za kolektív SIRIUS <br> Ľ. Skladaný <br>
  </p>
</div>
</div>

Solution

  • Does this fit what you're looking for?

    blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    width: 500px;
    margin: 0.25em 0;
    padding: 0.25em 40px;
    line-height: 1.45;
    position: relative;
    color: #616161;
}

blockquote:before {
    display: block;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a;
}

blockquote:after {
    display: block;
    content: "\201D";
    font-size: 80px;
    position: absolute;
    bottom: -40px;
    right: 0;
    color: #7a7a7a;
    margin: 0;
    padding: 0;
}

blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}

blockquote cite:after {
    content: "\2019 \2009";
}

blockquote cite:before {
    content: "\2014 \2009";
}
    <div class="w3-quarter w3-container">
        <img src="Images/pfp.png" alt="PFP" style="width:100%; height:100%; object-fit: contain;">
      </div>
      <div class="w3-threequarter w3-container">
        <blockquote style="width:auto;">
          <p style="text-align:justify;margin-bottom:0;">
            Vážení spoluobčania, <br>
            Vitajte na stránke SIRIUS. <br>
            Kolektív SIRIUS sa podujal vytvoriť ju po prvých podujatiach 22. 8. 2022 a 24.8.2022. 
            všetky vaše otázky a podnety – stanete sa spolutvorcami nového SIRIUSu. <br> <br>
            </blockquote>
            Tešíme sa na stretnutie, <br> 
            Za kolektív SIRIUS <br>
            Ľ. Skladaný <br>
          </p>
      </div>
    </div>