[Resolved] Responsive Buttons Colour is wrong

[troyw]

Hey guys,

I’m not sure what is happening, but the two buttons I have at the top of the home page (under banner) for ‘Residential’ and ‘Commercial’ are showing the wrong colour text, when viewed on a mobile device.
When viewed on a desktop the text in the buttons are white. In fact, even if I use my Mobile View extension in Chrome, the button text is white. This is how it should be!

However, if I look on a real mobile phone, the text is green.
I have checked the mobile block settings, even the button settings and the colours should be correct. Any ideas what is happening?

Thanks

[Fernando]

Hi Troyw,

It’s an optimization issue. Try adding this /?nocache at the end of the URL.

Your plugin or server may be loading the CSS files of GB earlier than GP.

The alternative would be to clear the link color in Appearance > Customize > Colors. Then just re-add this with custom CSS excluding GB buttons.

[troyw]

Hey Fernando,
If I change the link colour in Appearance > Customize > Colors, it will affect the entire website. I want the links to be green, but not on the buttons.
I have tried clearing the cache, but it doesn’t fix it either?

[troyw]

OK, so if I turn off WP Rocket (caching), the issue goes away. So how do I stop this? I don’t understand how normal link colours are being assigned to a button, but only in responsive view???

[Fernando]

On my end, it happens on all views.

It’s because of the Optimization plugin as mentioned. In this case, it’s WP Rocket.

To try to override this optimization setting, remove the color set in the Customizer and add this CSS instead:

.inside-article a:not(.gb-button), .paging-navigation a:not(.gb-button), .comments-area a:not(.gb-button), .page-header a:not(.gb-button) {
    color: #5cba3c;
}

[troyw]

That did it Fernando, thanks so much.

[Fernando]

You’re welcome, Troyw!

[Author]

Posts