[Resolved] Updates to pages and templates break CSS/styles

[Author]

Posts

[terryP-3]

I am trying to: Update pages

Link to a page where the issue can be seen: Any Garden Ruins under the Garden Ruins Template - I'm on version 3 now. Once a template gets "corrupted? I have to start over. It works until one update- it's busted. hidden link

also: hidden link though I am tempted to add a template until resolved as this is a landing page with 25% visitors landing here. (BUSTED this AM after a small revision. then tried to re-revise to regenerate CSS...script - whatever is breaking.)

I expected to see: The same styles that are shown in the editor- but those styles and layouts disappear on the front end. Only Toolset blocks are effected- My site is mostly Toolset Blocks!

Instead, I got: unstyled content and inline elements. This has been going on for months. The workarounds are no longer working, and they are happening more frequently on other pages and templates.

[terryP-3]

Aslo- "Hide Element" isn't working. I wanted to switch resolutions for hero images for desktop and mobile (since that isn't an attribute you can change like styles for each breakpiont::ahem). This is not working for Toolset Image. You can see any of my Grill Islands for an example. Instead of saving bandwidth, I'm increasing it.

hidden link

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

I'm seeing some script errors showing in the browser's console when viewing the single "Garden Ruins" post pages. Those errors originate from a file getting loaded by the "Spectra" plugin (formerly, Ultimate Addons for Gutenberg).
( example file: /wp-content/uploads/uag-plugin/assets/509000/uag-js-509423-1670059928.js )

Script errors such as this can interfere with the other scripts and styles getting loaded on the page. Can you please temporarily disable the "Spectra" plugin and see if the issue with the content temple styles is resolved?

In case the issue still persists, I'll need your permission to download a clone/snapshot of the website, to investigate this on a different server, in more depth.

regards,
Waqar

[terryP-3]

Waqar:

Thanks for the info. That solves the problem of getting a template to save the proper CSS. BTW- how do you find or see these errors? I don't want to depend on you for every issue.

I have tried again to have "hero" images be shown or hidden due to browser or screen size. Yet both images show on all resolutions. You can see an example here:

hidden link

I am using the Toolset Image blocks for each instance of the image. I am also relying on the toggle under advanced (see image). Yet they both appear.

Is there something I could add to the HTML to force it to not display at a specific breakpoint?

[tb-dynamic-container provider='__current_post' source='media-featured-image-data' field='' removeDeadLinkTarget="true"]<figure class="wp-block-image tb-image tb-image-dynamic tb-image-frame-shadow1" data-toolset-blocks-image="1"><div class="tb-image-shadow-1"><div class="tb-image-shadow-1-shadows-container"><div class="tb-image-shadow-1-inner"></div><div class="tb-image-shadow-1-shadow-1"> </div><div class="tb-image-shadow-1-shadow-2"> </div></div></div></figure>[/tb-dynamic-container]

[Waqar]

Thanks for the update.

Here are useful resources on using the browser's console to troubleshoot the script errors:

https://wordpress.org/support/article/using-your-browser-to-diagnose-javascript-errors/
hidden link
hidden link

Using the same browser's console, you'll see that there are still a number of script errors, coming from the script files, like:
/wp-content/plugins/ultimate-addons-for-gutenberg/assets/js/table-of-contents.min.js
hidden link
hidden link

There script errors will need to be fixed before the responsiveness styles could be investigated since they can be the cause of those styles not getting applied.

[terryP-3]

Thank you for your insights, Waqar!