My colleague Gustavo figured out why this custom CSS isn’t working.
First, we need to add an !important on both property/value pairs, because there are competing !important s coming from somewhere else on your site, possibly a plugin but I’m not sure, as I can’t replicate it. (I cannot replicate this on my test site, where !important isn’t needed.)
Second, you are missing a few closing curly brackets on some of your media queries. This means that custom CSS added below the invalid code isn’t being applied at all, since the browser stops when it hits the invalid CSS.
So, first please try adding this at the top of your custom CSS editor, above all your other custom CSS:
.wp-block-jetpack-contact-form .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
border: solid 1px #000000 !important;
background-color: #ffffff !important;
}
You should see the button border and background colour now on hover.
Next, you can fix the rest of your custom CSS, either by adding in the missing closing curly brackets in each declaration. Better yet, combine the multiple media queries into one, since it’s not necessary to repeat the same breakpoint over and over.
So instead of these multiple media queries you currently have, with missing closing brackets in most of them:
@media (max-width: 651px) {
.home .wp-block-media-text .wp-block-media-text__content > *:first-child {
padding-right: 40px;
}
@media (max-width: 651px) {
.home .wp-block-media-text__media img, .wp-block-media-text__media video {
padding-right: 50px;
}
@media (max-width: 651px) {
.home.tw-header-bg:not(.page-template) .entry-content > .alignfull:first-child, .tw-no-title.tw-header-bg .entry-content > .alignfull:first-child {
margin-top: calc(var(--global--spacing-vertical)*-7);
}
@media (max-width: 651px) {
.post-469 .wp-block-columns .wp-block-column > ol, .wp-block-columns .wp-block-column > ul, .wp-block-columns .wp-block-column p, .wp-block-media-text:not(.alignwide):not(.alignfull) p {
padding-right: 0px;
}
@media (max-width: 651px) {
#post-4 .wp-block-columns .wp-block-column > ol,
#post-4 .wp-block-columns .wp-block-column > ul,
#post-4 .wp-block-columns .wp-block-column p,
#post-4 .wp-block-media-text:not(.alignwide):not(.alignfull) p {
padding-right: 40px;
}
}
…you could combine them into something like this instead:
@media (max-width: 651px) {
.home .wp-block-media-text .wp-block-media-text__content > *:first-child {
padding-right: 40px;
}
.home .wp-block-media-text__media img, .wp-block-media-text__media video {
padding-right: 50px;
}
.home.tw-header-bg:not(.page-template) .entry-content > .alignfull:first-child, .tw-no-title.tw-header-bg .entry-content > .alignfull:first-child {
margin-top: calc(var(--global--spacing-vertical)*-7);
}
.post-469 .wp-block-columns .wp-block-column > ol, .wp-block-columns .wp-block-column > ul, .wp-block-columns .wp-block-column p, .wp-block-media-text:not(.alignwide):not(.alignfull) p {
padding-right: 0px;
}
#post-4 .wp-block-columns .wp-block-column > ol,
#post-4 .wp-block-columns .wp-block-column > ul,
#post-4 .wp-block-columns .wp-block-column p,
#post-4 .wp-block-media-text:not(.alignwide):not(.alignfull) p {
padding-right: 40px;
}
}
A tip: I’d suggest writing your code in a code editor in the future, as it’ll make syntax errors like this more obvious.
Let me know how it goes!
