Unsure how to file this, because it might be an isolated issue, and it will probably be difficult to recreate on your end, but I’m having issues with how a particular section is displaying on the backed, versus the frontend.
On the backend it looks and works as expected. When I hover over different columns, images should appear or disappear depending on the column. All was working fine, until I added a JS snippet to target another selector, which did not work, so I removed it, and now the images no longer show on the frontend, but everything still looks fine on the backend.
So now I’m just at a loss as to what’s gone wrong and why this no longer works. I’ve lost quite a bit of time trying to troubleshoot, as the backend is giving me no clues.
After some troubleshooting, it’s proven that there’s nothing wrong with my relative styles or the elements.
I’ve copied the section over to a new page and it works as expected.
It just no longer works on the original page, and will not work if there are other sections on the page. There are no console errors, so still unsure where this problem lies.
There’s a certain fragility to Cwicly that truly concerns me. Small things can cause frustrating and unexpected results. Some we can chalk up to user error, but others are really baffling. I am spending a considerable amount of time with troubleshooting. Far more than actually making progress with this build.
It wouldn’t be a stretch to say I’ve sunk 150+ hours into this at this point, and there is still considerable work to be done.
This is all plain HTML/CSS that doesn’t get altered when going from backend to frontend (except for very rare cases).
I can understand your frustration, but there really isn’t anything to go on from your post here…
Your relative rules, the specific elements you’re trying to target, give us something to touch on.
I have narrowed down the issue to a missing position: relative on the section container.
The fact it continued to work fine on the backend was the most frustrating part, since it really should break there as well. The frontend was accurate, but the backend was not, and this was what was making it difficult to figure out the issue.
So, user error for sure, but I think we need some more alignment between backend and frontend.
How come this was working before the script modification?
This is a known limitation with Gutenberg since the very beginning (adds relative positioning to all elements). Please also reach out to the Gutenberg team so that they’re aware of the situation.
The script wasn’t the culprit. I rearranged some containers which introduced one without any positioning set.
This isn’t information that I had. Is there a way to unset this?
Basically, without cues that I’m making mistakes, it’s just very difficult for me to rectify.
And I know working with Gutenberg is an uphill battle since they have made countless questionable decisions throughout. You’ve done a tremendous job getting Cwicly to where it is that I have to wonder whether Gutenberg isn’t just a massive albatross weighing this project down.
To wrap, it all works fine now (with the script), and it’s as elegant as I would expect.
Thanks for your help.
In this specific case, when absolutely positioning an element - if it doesn’t appear - the first thing to do is check if your parent is containing the element properly.
Absolute positioning asks for these simple checks if things aren’t working out.