On my OGAL blog I wanted to create a stylized blockquote that broke the container a bit to help stand out.

@media (min-width: 1025px) {
.dynamic-entry-content blockquote{
margin-bottom: -20px;
border: none;
}
.dynamic-entry-content .wp-block-quote p{
border-top: 2px solid #ccc;
color: #000e26;
max-width: 420px;
font-size: 28px;
line-height: 1.5;
border-left: none;
padding-top: 16px;
padding-left: 0px;
padding-right: 16px;
padding-bottom: 0px;
clear: both;
float: left;
margin-left: -120px;
margin-top: 10px;
margin-right: 48px;
margin-bottom: 48px;
font-weight: bold;
font-style: normal;
}
}
@media (min-width: 769px) and (max-width: 1024px){
.dynamic-entry-content blockquote{
margin-bottom: -20px;
border: none;
}
.dynamic-entry-content .wp-block-quote p{
border-top: 2px solid #ccc;
color: #000e26;
max-width: 420px;
font-size: 28px;
line-height: 1.5;
border-left: none;
padding-top: 16px;
padding-left: 00px;
padding-right: 16px;
padding-bottom: 0px;
clear: both;
float: left;
margin-left: -20px;
margin-top: 10px;
margin-right: 48px;
margin-bottom: 48px;
font-weight: bold;
font-style: normal;
}
}
@media (max-width: 768px) {
.dynamic-entry-content blockquote{
margin-bottom: -20px;
border: none;
}
.dynamic-entry-content .wp-block-quote p{
border-top: 2px solid #ccc;
color: #000e26;
width: 100%;
font-size: 28px;
line-height: 1.5;
border-left: none;
padding-top: 16px;
padding-left: 00px;
padding-right: 0px;
padding-bottom: 0px;
margin-left: -20px;
margin-right: 0px;
margin-bottom: 48px;
font-weight: bold;
font-style: normal;
}
}
A few things to note about this code…
- The media queries probably contain a lot of redundant code and could be further optimized.
- I only wanted to affect the blockquotes inside of my blog posts, so the
wp-block-quote
selector is nested inside a selector I have on the container of my blog posts (.dynamic-entry-content
)