[Resolved] Some buttons lose their format on the front end – but look ok in the backend

[Vic]

Hi GP,
I have based my new site on your site library – Vinyasa.
On my below linked page, for Lance and Christiana, the blue Contact button looks correct on the backend, and also looks correct on the front end (website).
However, with Sarah and David, while the same blue Contact button also looks correct on the backend, as you can see, it seems to lose the formatting on the front end?
The same has happened to the buttons in the last block on this page “Interested in finding out more?”
I have checked all the page button block settings, and cannot find anything different?
I am not sure if the existing site library custom css might be causing this?
Thankyou.

[David]

Hi there,

can you try Regenerating the CSS in Dashboard > GenerateBlocks > Settings.

[Vic]

Thankyou David.
I found that “Regenerate the CSS files” button under GenerateBlocks > Settings.
I have tried it twice now – with no change/improvement – viewed from various browsers.
Could you provide any further suggestions please.

[Ying]

Hi Vic,

Can you try disable the cache plugin and choose Inline Embedding for the CSS Print Method in Settings > GenerateBlocks?

Let me know 🙂

[Vic]

Thankyou Ying.
As I don’t believe I have a separate “cache plugin” installed, are you referring to a setting within the GP theme?
Does it mean to untick this box under appearance\customising\general – Cache dynamic CSS Cache CSS generated by your options to boost performance.?
I have done that.
I have also made the other changed of the “CSS Print Method” to “Inline Embedding”.
And there has been no improvement.

[Ying]

Any chance you can create a staging site with all plugins deactivated except GenerateBLocks and GeneratePress for us to do some testing at the back end?

Please also provide SFTP details in order to do some debugging.

Please use the private info field to enter the info.

Thanks!

[Vic]

Thankyou again Ying.
Sorry but I have never created a staging site before…so when I stumble, could you please guide me.
I have followed my website hosts cpanel guide below.
I now have a duplicated database and duplicated folders setup under the below directory I can see in the below path.
I have amended the wp.config file database settings.
I assume I do not need to amend any references in the mysql database?
But I am not sure now how to view the wp front end or access the backend of this staging site?
Unfortunately the help document stops before this.
It’s probably so simple it doesn’t need to be said…but it’s not apparent to me yet 🙁

[Elvin]

Hi Vic,

It’s best to ask your hosting company’s support for this one so they can assist/fix things out of your control in case something goes wrong. 🙂

As for caching, you may have to ask the host as well if they have some sort of page caching in play that may be serving an older state of the site.

As for turning GB to inline embed here’s the option – https://share.getcloudapp.com/OAuGYZQz – which is completely different from GP customizer settings.

[Vic]

OK. I have finally worked out how to access the staging site I created. The url is below.

I have also created an FTP account for you to access the staging site directory. Details are below.
You suggested SFTP. I asked my website host how to set this up and they suggested FTP over TLS should be sufficient?

[Tom]

Hi there,

FTP will definitely work. I believe I’m only seeing WP login details in the private area – can you share the FTP details as well?

Thanks!

[Vic]

Thankyou for the reply.
This is my first time creating a staging site…so hopefully I am on the right track.
I may have posted those ftp details earlier?
But have posted them below now as requested.

The staging site has not been altered from when I first saw the problem.
Although I am in the process of rebuilding the page on the main site.
It seemed to me, that all buttons on the page after the “Christiana Lees” block were not formatted correctly.
Could it have been due to special characters used in the text of “Christiana Lees”?
Because when I moved those following blocks above her, the buttons are again formatting correctly in the front end.
The original problem was, while the buttons are formatting correctly in the backend, they were not in the front end.

[Tom]

Ah, sorry! I pasted wrong.

Ok, I think I see the issue. In the “Contact Christiana” button, can you make sure the button background hover color has a closing )?

I believe it’s set to rgba(10, 117, 184, 0.8 right now, without the closing ). It should be: rgba(10, 117, 184, 0.8)

Let me know 🙂

[Vic]

Yes, that resolved the issue.
I am very sorry about taking up your time like that.
Thankyou very much for identifying my mistake.
Hopefully that will be the last one of those I make…that I can’t resolve myself.

[Tom]

No worries at all! We’ll see what we can do about preventing small errors like this in future versions 🙂

[Author]

Posts