I noticed something when I styled the 1st item in the element.
I have a container which contains two buttons in it. Both have the same global class. However, when I add some styling for the first button with the :first-child pseudo-class, it doesn’t show the styling in the editor. Anyway, It works well on the front end.
The editor should render everything in the editor for what we have added to the site.
Highlight: I also noticed that the editor doesn’t render the custom CSS we added to the editor. Anyway, it also worked well on the front end.
When I styled the hover effect, the editor didn’t turn the item to hover mode.
As a result, I had to hover over the item to see the effect I had styled, which was not good.
Can confirm it’s not working.
Seems to be related to global classes, since it’s working with block classes.
It doesn’t get added in the back-end’s styling rules.
Maybe you want to create a bug report?
Some thoughts:
Why don’t you just use the gap property on the parent container?
I think that’s the way to go, since it comes with some benefits.
One of them is the ability to stack the buttons vertically on smaller screens by only changing the flex direction.
In your current setup you would need to override the margin-right and then set a margin-bottom.
But I can see also why you would add it to a global class. It’s just a suggestion.
I’ll try to go through every item, please let me know if I’m missing anything.
:first-child styles are not applied correctly on the backend.
Correct. This is currently a limitation with how we’re rendering styles for blocks (<style> tag above the block itself, which is considered a sibling). We are looking at the different solutions available to us. I appreciate this is an issue. Rest assured it is something we’re looking to improve in the coming updates.
The editor doesn’t render the custom CSS added to the editor.
I’m going to have to ask you to detail this part a bit more as I can’t quite comprehend what you’re referring to exaclty. Is this custom CSS within a Cwicly block? Global stylesheet not rendering?
Styling hover effect doesn’t show the hover preview, having to hover over the element to see the changes.
This would apply to global classes only if I’m not mistaken, please confirm otherwise.
In any case, thanks for bringing this up as it is something that will be worked on very soon to provide a seamless experience.
Thanks for taking the time to point these issues out @jornes. We really do appreciate it. If I’ve missed anything, please let me know.
Hi @Louis
Thank you for the response! I appreciate it.
Well! Regarding this, I inserted a custom CSS code into a specified block, but the editor didn’t render anything based on what I inserted(but it worked on the front end).
I have tested this. Now, the live preview in the editor shows only whenever I choose the :first-child, :last-child and other pseudo-classes. But, when I switch to normal mode, the pseudo-classes styling will not show in the editor(anyway, it works fine on the front end). I will make a screencast when I have time later if it’s necessary.
This is not what was addressed in the latest update, as per my last message, please check the quote.
Which pseudo-classes are not showing on the backend?
As for the :first-child report, I said this in November:
