Blocks losing their format when page is published

Hi @ignaciosaenz,

Can you please share a screenshot of the preview, so I can also check the differences?
Moreover, can you please tell me what blocks did you use so I can try to replicate the problem?

Thank you!

I’m having the exact same problem. Any tips? My site is https://michelle-vogel.com

Hi @mishvo,

The problem on your website is that you’re loading your website with https:// while the Addresses of your website in Settings->General section are set with HTTP://

Make sure to set both these settings to https:// if you have SSL installed and load your website via a secure protocol and everything will work fine then.
Currently, CSS resources are being requested via secure protocol but loaded without HTTPS and the browser blocks those resources.

Let us know if this doesn’t help or you have any other questions, thanks!

Hello!

It happens to all blocks in the page. Advance header, columns, sections…
This is how it should look, how it’s shown in the preview:
https://pasteboard.co/JOAWGIG.png
And this is what is shown in the live site:
https://pasteboard.co/JOAXlAD.png

Hello @ignaciosaenz,

Did you manage to solve this issue? This is how I am seeing your page now https://prnt.sc/zqr08c , and it seems to have the blocks well loaded, like in the preview screenshot you provided.

Please let us know if you have any more questions.

Hello @danamv ,

I have the same issue with my website.

I’m using Neve 2.11.4, Creative Portfolio theme
Editor: Gutenberg

Plugins:
BBQ Firewall – Version 20210211
Duplicate Page – Version 4.4
EWWW Image Optimizer – Version 6.1.4
Google Analytics for WordPress by MonsterInsights – Version 7.17.0
Gutenberg Blocks and Template Library by Neve theme – Version 1.6.4
Templates Patterns Collection – Version 1.1.11
W3 Total Cache – Version 2.1.2
Wordfence Security – Version 7.5.3
WPForms Lite – Version 1.6.7
Yoast SEO – Version 16.2

I have
Cleared all caches, purged caches
Viewed the website in anonymous window, different browser and different tools
Updated Gutenberg blocks and template library by Neve theme

This is the preview of the home page where everything looks as supposed: https://janajandova.com/?preview_id=618&preview_nonce=0cb10475a8&preview=true&_thumbnail_id=571

And this is the life site: https://janajandova.com/

– the layout is wrong, I can’t see the uploaded turquoise background picture and the buttons are black instead of turquoise. There is the same issue with all the other sites in the menu.

This is my first website, I’m a beginner so I haven’t changed CSS myself.

Could you please help me with this issue?

Thank you very much.

• This reply was modified 3 years, 6 months ago by janijan7.

Hello @janijan7 ,

Thank you for choosing Neve!

We cannot access the preview link you posted as it is only visible to the admin (you in this case).

Could you please attach some screenshots depicting how the site in your vision and in preview looks like?

For the buttons to become turqoise you can add the below code into the Additional CSS tab in your Customize Menu:

.wp-block-button__link { background-color: var(–nv-primary-accent); }

Please provide the screenshots for further assistance on this case!

Thank you and have an amazing day!

Dear Mat,

thank you very much for picking my issue. Here is the link with screenshots from my preview on PC (100% size in browser): https://drive.google.com/drive/folders/1p5lvURTyEk5Ua3MsBrud_LTfYfFEo09m?usp=sharing

And these are screenshots from Gutenberg editor:
https://drive.google.com/drive/folders/1VuyAQvq0iaJX2HBwbZQBLyh4UaYBq3c3?usp=sharing

Ad your CSS suggestion to change the buttons turquoise – do you mean to add this in Gutenberg editor or in wordpress to customise the whole theme? I was using global colours in this case and changed the previous Creative Portfolio primary and secondary buttons colour which I can see both in editor and preview but not on the life site.

Thank you very much for your further assistance!

Thank you and have a lovely day!

Jana

Hello @janijan7 ,

The problem is that the styles are not loading correctly due to a “Mixed Content”error which comes from the fact that your website is secure ( has SSL thus address is https:// etc) whilst the links to the stylesheets remained http.

This can be fixed by going to the Dashboard -> Settings -> General and just rewrite https instead of http in the WordPress Address (URL) and Site Address (URL) ( ex: https://janajandova.com/) and hit Save.

https://ibb.co/vjm2GDV

After doing this go into Settings -> Otter -> Regenerate CSS.

https://ibb.co/Y8ZSFgp

This should fix all the styles and your website should look like intended.

As for the line of code mentioned in the earlier response, it has to be copied and pasted by Visit Website -> Customize -> Additional CSS ( and you insert it here)

This should make the buttons look turqoise too!

Please let me know if this helped!

Thank you!

Hello @mateithemeisle ,

thank you so much for indicating the problem. Could you please advise me how to edit the http to https? My URL address is grey/uneditable in my settings:
https://drive.google.com/file/d/1jEvorotNkurE7Fto0R4KbNqRqLX1Zv46/view?usp=sharing

Thank you very much!

Jana

Hello @janijan7 ,

This happens because your URL is hardly coded into the wp-config.php file.

In order to change that you have to update the file manually with the help of an FTP client. I know it might sound like a lot of work but if you follow the below steps precisely you’ll get it done in no time.

1) First Back-up you site to be safe in case something goes wrong.

2) Download an FTP client of your choice. ( here are some suggestions: https://www.wpbeginner.com/showcase/6-best-ftp-clients-for-wordpress-users/)

3) Simply connect to your website using an FTP client and edit the wp-config.php file. You need to add the following code just above the line that says ‘That’s all, stop editing! Happy publishing’.

CODE TO BE ADDED:

define( ‘WP_HOME’, ‘https://janajandova.com’ );
define( ‘WP_SITEURL’, ‘https://janajandova.com’ );

4) You can now save your changes and upload them back to your server. After that, visit your website to make sure that everything is working fine.

This should be all!

Please let us know if you still encounter the issue!

Thank you and have an amazing day!

Hello @mateithemeisle ,

thank you very much for your instructions. I managed to follow them using Cyberduck but there seems to be an error after adding the two codes:
https://drive.google.com/drive/folders/1IWw0mtg4a1V_2AMTpHyh0TCSoWRTavFp?usp=sharing

Any suggestions on what went wrong?

Thank you very much,

Jana

Hello @janijan7 ,

The error is caused by the syntax of the instruction applied. That was my bad… Paste the below code and it should work just fine!

define( 'WP_HOME', 'https://janajandova.com' );
define( 'WP_SITEURL', 'https://janajandova.com' );

Please let us know if everything is ok!

Thank you!

Hello @mateithemeisle ,

thank you so much for correcting the code. Now the error part is gone.
Would you be so kind to give me more guidance on how to upload the changes to the server?
I have added the two code lines and made refreshed it:
https://drive.google.com/drive/folders/1mGcQTVkB3_Z1X_PDhBlBwTnfiD2LYdml?usp=sharing

What are the next steps, please?

Thank you very much,

Jana

Hello @janijan7 ,

I’m glad to hear the code works now. As for uploading the files back it depends if you edited them remotely on the server or if you downloaded them locally and edited them.

For the first instance the changes should take effect next time you fire up wordpress and your sites changes should be visible. Clearing cache would also be a good idea.

As for the second instance you can follow what is said here https://wpmarmite.com/en/wordpress-ftp/#basic-usage

What needs to be done now basically is replace the old wp-config.php file with the new one on your website hosting.

Please let us know how it goes!

Thank you!