I would like to follow up on this post and refer to this response in particular.
i tried @cderv solution, and it works great, obviously, awesome tip, thank you so much, but I ran into one unexpected issue, i believe. I passed my CSS rule as advised, but it was overridden and I do not know by what. In my case, I am using the revealjs metropolis
template. I searched the template, but as a newbie, I could not find anything relevant.
When I inspect the html
file as per Christophe's suggestion, I do see my command:
.reveal .slide ul li, .reveal .slide ol li {
margin-top: 0.2em;
margin-bottom: 0em;
}
(index.html:968)
but now the two margin commands are striked out. It's striken out and indeed, just above, there is:
.reveal .slide ul li, .reveal .slide ol li {
margin-top: 0.4em;
margin-bottom: 0.2em;
}
(index.html:1573)
no idea where this one comes from, but i do not want it! looking at the numbers, I am guessing it's overriding my command too.
I would like to check whether the solution is then to specify the following !important
switch in my css file:
/* list items (li) within unordered lists (ul) */
.reveal .slides section ul li, .reveal .slides section ol li {
margin-top: 0.2em !important;
margin-bottom: 0em !important;
}
within my css file? is this the correct approach or am I doing something wrong and should be doing something else? This approach works, as it forces my css command to override the override!!, but I read that it's poor coding practice to be using !important
, and worse, it could cause unexpected adverse effects. Is that true? What is your suggestion? thank you so much for any pointers and sorry for troubling you with this.