So, here is the thing…
I want to achieve this kind of blockquote design. With the help of custom code, I’m almost there, but seems I can never nail it down. Key things that I want to achieve:
– The floral ornaments need to be fixed width
– They need to always be vertically centered
– They should not crop nor diminish in size when viewed on smaller resolutions.
My code is as follows:
.case-content__blockquote:before, .case-content__blockquote:after {
content: "";
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 48px;
height: 48px;
}
.case-content__blockquote:before {
background-image: url("quote-open.svg");
}
.case-content__blockquote:after {
background-image: url("quote-close.svg");
}
Am I missing something?