So I’m trying to adjust our blockquote text style, which is located in the \`style.css\` file in the parent theme.
However, when I change the CSS nothing happens on the front-end. It’s just the same style. I’ve cleared browser cache and purged the cache through Cloudflare.
For reference, here’s the old code:
`blockquote:before{content: ‘“’;font-size: 4.308rem;font-weight: 800;font-style: normal;line-height: 4.308rem;height: 2.154rem;overflow: hidden;display: block;margin-bottom: 1.385rem;color: #c9c9c9;}`
`blockquote{color: #929292;font-style: italic;font-size: 1.077rem;margin: 3.462rem 0 0;padding: 0 0 1.154rem;text-align: center;clear: both;}`
`blockquote p{margin: 0 0 0.5385rem 0;}`
`blockquote p:last-child{margin: 0;}`
Here’s the code we are trying to replace it with:
`blockquote {`
`color: #333 !important;`
`font-style: italic !important;`
`font-size: 1.5rem !important;`
`margin: 3em 0 !important;`
`padding: 0.5em 2em !important;`
`text-align: center !important;`
`clear: both !important;`
`position: relative !important;`
`background: #f9f9f9 !important;`
`border-left: 10px solid #CC5500 !important;`
`}`
​
`blockquote:before {`
`content: ‘“’ !important;`
`font-size: 4.308rem !important;`
`font-weight: 800 !important;`
`font-style: normal !important;`
`line-height: 4.308rem !important;`
`height: 2.154rem !important;`
`overflow: hidden !important;`
`display: block !important;`
`margin-bottom: 1.385rem !important;`
`color: #CC5500 !important;`
`position: absolute !important;`
`top: -20px !important;`
`left: -10px !important;`
`}`
​
`blockquote:after {`
`content: ‘”’ !important;`
`font-size: 4.308rem !important;`
`font-weight: 800 !important;`
`font-style: normal !important;`
`color: #CC5500 !important;`
`position: absolute !important;`
`bottom: -20px !important;`
`right: -10px !important;`
`}`
​
`blockquote p {`
`margin: 0 0 0.5385rem 0 !important;`
`}`
​
`blockquote p:last-child {`
`margin: 0 !important;`
`}`
Note that we’re using \`!important\` because we thought it may have been overridden by other style rules, but this made no difference.
Where could we change the blockquote code to change the style? I’ve looked everywhere.
My good friend ChatGPT has some advice:
Your code seems to be correct, so it’s curious that the changes are not being reflected on the front end. Here are some possible reasons why this might be happening:
Child Theme Issues: If you’re working with a WordPress site, you might be dealing with a child theme. If you’ve made changes in the parent theme’s style.css file, but there is a child theme active, the child theme’s styles could be overriding your changes. If a child theme is in use, try adding your styles to the child theme’s style.css file instead.
CSS Priority: Even though you’re using !important, there might be other CSS rules that are taking precedence. This can happen if there are other rules that are more specific, or if there are other !important rules that come after your rule in the CSS file.
CSS File Not Being Loaded: It’s possible that the style.css file you’re editing is not the one that’s being loaded by your website. This could happen if there’s a different CSS file that’s being loaded, or if there’s a setting or plugin that’s causing the CSS file to be loaded from a different location.
Caching Issues: Although you mentioned that you’ve cleared your browser cache and purged the cache through Cloudflare, there might still be a caching issue. There could be other levels of caching that are causing the old CSS to be served. This could be server-side caching, a caching plugin, or even a CDN caching issue.