When editing a block and Advanced → Custom CSS, the instructions say:
Enter CSS rules without selector.
You can use this area to further customize your block.
To target the class of this block, use the .blockclass selector.
To target the ID of this block, use the #blockid selector.
Which is it? Do we enter the css rule with a selector or without one? This is confusingly worded.
It was hard to tell if the change was occurring on back-end due to the admin bar effecting the height. But in any case, on the front end my css was not being overridden. It was simply not there, even though I could handwrite in the same css using chrome dev tools and see the desired effect.
I must have been doing something wrong. Thanks for your suggestions.
Do you have a live site? So I could have a quick look if there are any issues.
Could you also post a snapshot of what you exactly typed inside the custom CSS area, just to double check that there are no errors.
I also do agree that the 1st line of the instruction could confuse people, in my opinion the first 2 lines are redundant and also do waste space, especially with the big margins.
It is strange you were not seeing any changes, and that it wasn’t applied on the frontend. Definitely the first time this is reported. It would be great if you can reproduce this so that we see what’s going wrong.
Looking at this once again, the wording is confused and basically incorrect. Thanks for bringing it up.
I was attempting to reduce the height of my full screen modal by the height of the header so that the open modal sits exactly below the header and reaches to the bottom of the viewport. So in the custom CSS for the modal block I added this:
height: calc( 100% - 56px);
I also tried the block ID to be more specific:
height: calc( 100% - 56px);
I attempted this before I discovered (and Marius confirmed) that I can simply type the calc into the Sizing setting for the modal. This latter approach achieved what I wanted.
However, repeating the same attempt today and adding the above code into the Custom CSS field again, I would expect to see it in Dev Tools, and see either this rule or the one entered via Sizing to be overruled (one overruling the other). But I only see the one from the Sizing field, which continues to work properly.
It doesn’t sound like anyone else is having issues with the Custom CSS field so it must be my environment or my syntax. I did regenerate CSS and remove/clear caching many times.
Btw. targeting the ID is not the correct way to go in this case.
The modal block contains various layers and there is a reason why there are quiet a few dedicated options inside the block options.
You need to be careful what you are doing with these kind of blocks, like modal, slider, etc.
I also would check the actual HTML structure on frontend first so I know exactly how to proceed.
Can you confirm, using the custom CSS area on a simple block, for instance a heading or a paragraph, is not working either?