Custom styling for >Blockquote

[jord8on (Jordan)]

I’ve created the following custom styling for my blockquotes on this forum page. But I’m having some issues as outlined below. Here’s my CSS overrides…

blockquote {
  display: block;
  border-width: 2px 0;
  border-style: solid;
  border-color: #f7d4de;
  padding: 1.7em 30px;
  position: absolute;
  background-color: #fbeaee;
  border-radius: 5px;
}

blockquote:before {
  content: '\201C';
  position: absolute;
  top: 0em;
  left: 50%;
  padding: 5px 0 0 0;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 3rem;
  height: 2rem;
  color: #B7234C;
  font: 2.45em/1.1em 'FontAwesome';
  text-align: center;
  border-radius: 50px;
  background-color: #f7d4de;
  box-shadow: 0 1px 5px #888888;
}

When the code is like that ︎ the blockquote appears exactly as I’d like, but it covers the text that follows the blockquote!

e.g.

When I change the blockquote {position: absolute;} to {position: relative;} then the text is no longer tucked up, under the blockquote as illustrated in the image above. But you can see that the blockquote:before element is cut off.

e.g.

What’s the best way to optimize my code to put a little bit of a margin after the blockquote, before the rest of the text displays, while also pulling down the “blockquote” so that the “before” element is not getting cut off?

Thanks in advance for anyone willing to help!!

[molszew (Martin)]

Just add margin-top: 20px to .cooked blockquote and you’ll be fine.

[jord8on (Jordan)]

@molszew

margin-top: 20px

Thanks for trying to help @molszew! I already tried that before and it didn’t work, but I tried again just incase I missed something. Still didn’t work.

Another point to note… when I looked at these quotes in the mobile view, with the code I outlined in the OP, the quote was appearing just fine, without being cut off.

If someone else has a solution or reason why it was appearing cut off, I’d love to try it out and get the quote bubble on the top.

[Johani (Joe)]

There’s a CSS rule in core that looks like this:

.cooked>*:first-child {
  margin-top: 0;
}

This is used to normalize the top margins of elements, since a set 15px margin is added to the parent element, we remove all top margins from first-child elements.

This is a more specific rule so it strips the top margins you added to the blockquotes if they are the first child of cooked. So here’s something you can try and see if it works for you.

1. use position relative on the blockquotes
2. add the fix Martin suggested above
3. add this selector as well

   .cooked>blockquote:first-child
   

So you end up with

.cooked>blockquote,
.cooked>blockquote:first-child {
  margin-top: 20px;
}

[jord8on (Jordan)]

Having the quote icon at the bottom (my workaround) was starting to grow on me! But thank you for taking the time to respond. I applied your suggestions and everything is looking good now!

Here’s my final code:

blockquote {
  display: block;
  border-width: 2px 0;
  border-style: solid;
  border-color: #f7d4de;
  padding: 1.7em 30px;
  position: relative;
  background-color: #fbeaee;
  border-radius: 5px;
  margin: 20px 0;
}

blockquote:before {
  content: '\201C';
  position: absolute;
  top: 0em;
  left: 50%;
  padding: 5px 0 0 0;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 3rem;
  height: 2rem;
  color: #B7234C;
  font: 2.45em/1.1em 'FontAwesome';
  text-align: center;
  border-radius: 50px;
  background-color: #f7d4de;
  box-shadow: 0 1px 5px #888888;
}

.cooked>blockquote,
.cooked>blockquote:first-child {
  margin-top: 20px;
}