Backlight suddenly broken (narrow columns)?

[MindStormPhoto]

FIXED NOW! (thanks to the suggestions I got here, I was able to turn my attention to the HTML, which I then found the bug)

I have been using Backlight for something like 2 decades at this point. It has worked well for me… until 3 days ago.

I have a 2 column blog. The left column is 80% of the width of the page, while the right column is 20% and has things like a searcher, archive list, etc. All was well until recently.

Now, the left column is about 10% of the width of the window – PC or mobile both have the same issue. The page will display properly when it first comes up, then about one second later squishes everything to the far left edge.

After 3 days of poking and playing, I am giving up and asking for help here. Anyone else see this? Have a fix for it?

The site is at www.MindStormPhoto.com

[rod_barbee]

There are a number of html errors on that page, like this. https:// and http:// in the href attribute. Also a <p> inside the `href’ attribute.

Also some unclosed elements. Take a look through an html validator:
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.mindstormphoto.com%2F

If you’re not writing the html, then it could be a problem with WordPress blocks or perhaps a plug-in?
Is your WordPress install up to date? All plugins up to date? Was there an update to a plugin that coincides with the issue?

Your site is also missing the Font Awesome icons in the navigation menu. Are you on BL4?
If so, BL5 will fix this.
See this post for why this is:

Upcoming Changes to Font Awesome

Hello! Font Awesome changes will be forthcoming in our next release of Backlight 5. There are a handful of motivating factors for these changes, including, but not limited to … GDPR concerns, such those those voiced in threads such as this, and … as a result, Font Awesome having become a support concern/headache both for ourselves and our users; the fact that Kookaburra does not use Font Awesome at all, which is a part of … a general interest in removing outside/third-party dependencies from …

If you want to continue with BL4 (assuming that’s what you’re using) then here’s the fix:

Font Awesome 5 Free Unicode Fix - TTG Tips and Tricks

[Matthew]

Also, I’m seeing some of your pages don’t work? Seems like any of the year pages under Travel are broken, such as 2023.

[MindStormPhoto]

Thanks for your detailed response! I am still a bit sleepy this morning (typing this from Tasmania after just getting up, having traveled 39 hours to reach here yesterday from Cambodia, where we did a whirlwind tour for 6 days, halfway around the world from our home in Hawaii… )

I think I might be in BL4. I remember seeing the BL5 update announcement, but had put it off while on the road (won’t be home until Jan 2024). Internet here in Tasmania is good, so maybe I will try that tonight, and see if it resolves matters.

BTW, I am not typing any HTML other than the occasional smiley I insert. Everything is added using the WP block editor. I did get a message from my ISP about WP being updated around the time everything broke.

[rod_barbee]

@MindStormPhoto

I think I might be in BL4. I remember seeing the BL5 update announcement, but had put it off while on the road

Be sure to see this, then:
https://blog.theturninggate.net/2023/11/13/update-backlight-4-1-4/

@MindStormPhoto

BTW, I am not typing any HTML other than the occasional smiley I insert. Everything is added using the WP block editor. I did get a message from my ISP about WP being updated around the time everything broke.

I’m afraid we may not be of much help with that. I know I won’t. I never liked Gutenberg so I use the classic editor. Perhaps someone else in the forum knows more about using the block editor.

[MindStormPhoto]

I just checked, planning on updating to BL5… and find I am already on BL5.

[MindStormPhoto]

I am currently running BL5. I just checked, planning on updating if necessary, but find that is my current version. I probably updated when it first came out, a few months ago(?)

[Daniel]

Yeah, it looks like Font Awesome is correct for your regular pages. Try to export the Wordpress theme from the backlight template page.

[Daniel]

For the syntax errors, start with the Popular Mechanics link and correct it (http:// <p>https:// and closing </p> tag after </a> tag ). Check the quotes with the link and/or the target as they are curly quotes and not double quotes.

I’m not using Gutenberg, but there’s an option to edit code: How to use the Code Editor in the Gutenberg Editor

[MindStormPhoto]

WORKING NOW!

One of the blog posts had some bad HTML, which was causing the main column to switch from 80% of the window width to 10%.

I didn’t really track down which line was bad, but I removed posts until the blog worked again, then added back all the ones that were not problems. Finally, I just created a new version of the defective post, and all was well with the world again…

Thanks to all who helped on this! You guided me to looking at the HTML, which is how I discovered the cause of the problem