Page breaks at frontend, showing correct while Editing at backend and with Preview mode

Bricksfan · May 31, 2024, 11:18am

The page at frontend suddenly breaks, as if no CSS or most of the CSS not working or rendering at frontend (browser)
It was showing perfect few moments earlier, till then.
However, Showing correctly in the Editor mode and Preview mode (Eye button), just showing broken at frontend in the browser. Tried different browsers too.

As far as I remember, I did not made any such change. So I looked few of the threads here in the forum. And found that this could be due to any incorrect custom CSS. Affecting only one page, rest others are working fine. Duplicating the page did not resolved either.

So I checked and found only 1 custom CSS on that page that was affecting (showing 4 times, duplicating from one block on 4 different blocks, intentionally to have effect on each) and found there is nothing wrong with that CSS.
Still, I then tried to Hide (using style display: none) those 4 blocks, but still the issue persists.
Then I removed the CSS from those blocks and Saved, but still issue persists.

That kept scratching my head. There were NO JS and not using any single plugin. Completely fresh one, testing like staging site.

But then I tried to look into each element patiently, and into the styles tab of each.

I surprisingly found there was a backslash "" as a value, added or entered in the padding field (Top and bottom only) on one of the Block (or probably Basic Text element)

This could be due to using the backspace button that I might have used to remove the previously added padding values (but then mistyped or mis-pressed the backslash key, as the backslash is just beneath the backspace key on keyboard)

But my question is, I was able to find out as there were not enough elements on the page. Otherwise, it might have took ages.

Also, I think such keys should not be allowed to enter or if they can be ignored, if entered (to avoid such issues).
I mean, the padding, margin areas should accept only numbers (including units only) and Not other characters, otherwise, that may ruin the whole work, without us even knowing it, until we found out.

This seems sort of a bug or glitch.
And I assume, the same is with Elementor or any other Builders, such keys are not being taken up. However, not sure.

Even if they are accepting, can Bricks Dev team find some way to Not accept unwanted letters or keys at any such area.

Or any other way to test the incorrect or incomplete CSS across pages, so that one can easily trace the culprit, if anything goes wrong like this. Just my views.

So as to avoid time and sudden unexpected pressure.

Or if the builder can give some hint, if any such value or keys entered in any of such fields, some way or other. Just an idea.

If any such thing already exists to trace and resolve, then please suggest. Maybe I am missing.

I am writing this in detail, as there are many others who are still facing the issue and may face in future. And they can view the thread and can find such similar value in any of the field.

That may help to resolve their concern too.

@timmse
Can you please share your views and suggest

Regards

Browser: Chrome 110
OS: Windows

timmse · May 31, 2024, 1:06pm

Hi Harshil,
Thanks for your report!

However, this is not a bug, and there is no reason to tag me twice

It is almost impossible to set up specific rules for each input field, what is allowed and what is not, but you can, of course, create a “CSS validation/linting” idea in the idea board:

Basically, it is easy to find out where the problem lies and normally takes a maximum of two minutes - if you know how:

How to find invalid CSS

If your styles are no longer output correctly after a certain point, it is usually due to invalid CSS that destroys the subsequent styles. This problem usually occurs with external files, but there is an easy way to find out where the problem lies.

go to the Bricks settings and change your styles to inline styles
open your browser’s dev tools and search for a style tag with the ID “bricks-frontend-inline-inline-css”.
copy the whole tag into a code editor such as VS Code, which supports CSS linting. After removing the opening and closing HTML style tags, you will be able to see directly whether your styles contain errors
if you find an error within a class, you can quickly fix it. If the error is on the ID of an element, search for the ID within the source code so that you can see which element it is

Have a great weekend!

Bricksfan · June 5, 2024, 7:55pm

Hello,

Thank you for your swift response.
Sorry, tagging twice, was not deliberate.

There was no external file and not using an external css option. I am wondering why that still throws the error.

Yes, styles are already set to inline styles.
I could find the style with tag ID, that you suggested. Thank you for sharing the steps with screenshot. But I am new to follow these and not good at codes.

However, right clicking that reveal so many options to copy, as can be seen from below screenshot.

options to copy the style for ID

Do I need to use the Copy Styles option from those shown and can be seen from above.
The link you provided for VS code tool - Is that one, a completely Free to use.

Is there any online tool or other smaller sized software or utility that you can suggest, where I can test it.

From my side, I tried to use couple of online tools, but could not get success. Those shows too many errors and not sure, whether I was using them the correct way or not.

Would appreciate, if you could please suggest with few more details.

Regards

Bricksfan · June 5, 2024, 8:21pm

Hello @timmse

In addition to my above reply, I just installed the tool VS code, you suggested.

I simply created a New empty file and pasted the code using the right click on that inline css file name (you mentioned), and use the Copy > Copy styles options.

Now, I don’t know how to proceed further and how to test.
And which style tags it requires to be removed. Can you please share screenshot with some details, on how to do that.

PS: I think I need to use copy > copy element after right clicking that inline css from Dev tool. Can you Please confirm. If not which one.
I then tried to paste that in VS code tool as a New file. (Haven’t configured anything after installing that too. Do not want to mess up, and not even sure)
Then at bottom left it was showing x icon (error warning). I clicked that and removed the top most style ID tag and ending tag of the same.
Did I follow it correctly.

If so, it then only shows one warning or error for “root” Line 2
I hope that is normal to show.
And I assume I followed it correctly.

Can you please clarify and suggest

Regards