Preview Displaying Different than Live Site

I have the same problem. The preview displays as I expect it but not the live page. Seems like some of the styles are not hooked up. e.g. if I add a background image to a section, it shows up in preview but not on live page. I’m on latest version of everything as I just installed it today to try it out.

• This reply was modified 4 years, 7 months ago by acurran.

Hi there,

Could you please provide some screenshots of the preview and the frontend, so I can better understand what’s not updating?

Thank you,
Rodica

Here’s an example that I just started playing around with:
https://imgur.com/a/fJwqd1v
I just installed the Neve theme on a fresh WordPress install and imported one of the demos and started playing around with it. The upper screenshot in that image is the preview and the lower one is the actual live page. The block element is the Otter section block. In the editor looks like this:
https://imgur.com/a/fDt5gjh

Even the original content from the demo is messed up too:
https://imgur.com/NEg2rSM
(again upper screenshot is the preview and lower is the actual).

I’ve not set up a child theme, just using Neve directly.

From checking with the inspector it appears that the missing styles are inline styles in the preview mode.

Hi,

Could you please share the URL of your site so I can inspect the code?
Also, are you using the latest version of Otter blocks?
If you add an image in the Image block from the WordPress editor are you able to see that image on the site?

Regards,
Rodica

The website is not live and domain is pointing to a different website, but if you point triumphriders.co.nz to 149.28.176.14 in your local hosts file you can access it.

Yes latest version – I only just installed everything fresh last week.

Yes, image added with standard image block is visible.

The issue seems to be with the styles for the themeisle blocks that are inserted internally on the page. In live page source I see the styles are minimisied but in preview page source they are not. But expanding out and examining the styles I can see differences, e.g.

in preview the styles start off:

#wp-block-themeisle-blocks-advanced-columns-c69e212f {
	padding-top: 80px;
	padding-right: 20px;
	padding-bottom: 80px;
	padding-left: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	min-height: 100vh;
	background-image: url( https://triumphriders.co.nz/wp-content/uploads/T100_RBW-1410x793-1.jpg );
	background-attachment: local;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-width: 0px;
	border-style: solid;
	border-color: #000000;
	border-radius: 0px;
}
 
#wp-block-themeisle-blocks-advanced-columns-c69e212f > .wp-block-themeisle-blocks-advanced-columns-overlay {
	background: #111111;
	opacity: 0.56;
}

but in live page they start off:

#wp-block-themeisle-blocks-advanced-columns-c69e212f {
   padding-top:80px;
   padding-right:20px;
   padding-bottom:80px;
   padding-left:20px;
   margin-top:0;
   margin-bottom:0;
   min-height:auto
}
#wp-block-themeisle-blocks-advanced-columns-c69e212f .wp-themeisle-block-overlay {
   filter:blur(0px) brightness(1) contrast(1) grayscale(0) hue-rotate(0deg) saturate(1)
}

Hi,

That’s weird. I’ve tried the same setup on my side and everything worked well.
The only idea I have is to go to Settings > Otter and click on the Regenerate button that should regenerate the styles. https://snpy.in/0AuesW

Let me know if that helps.

Regards,
Rodica

I just noticed that there was a new update available for Otter plugin, so I updated from 1.5.2 to 1.5.3 and this seems to have fixed the problem. After I made an edit and updated the page it now displays ok. I guess there was a bug in 1.5.2? (Sorry, in a previous response I just assumed I was on latest version because I only just set up the website afresh less than a week ago).

Hi,

No problem. It’s good that everything’s well now. It’s possible there was an issue in Otter. Try to always make sure you have everything up to date ??

Regards,
Rodica

Hi,

I have this problem, I have updated Otter, tried to view the site incognito etc.

The only thing I am not getting is the Otter Regenerate option, this button is not active for me to be able to press it.

I have no updates available and unsure where to go now.

I can provide temporary access to the site if needed, its a fresh wordpress install and I have customised the Gym starter site.

Thanks

Liam

OK so I was given the ability to press the regenerate styles button in Otter and it now all works.

Thanks for the advice guys!