Custom CSS Issue
I was asked to make the Comments, Like, and Share buttons on the Timeline Posts a little bigger so that they can be easier to access via mobile. On my test site, I was able to do this by adding this to the custom styles area in Protean:
.bx-menu-hor li .sys-icon.comment {
font-size: 1.2rem;
}
.bx-menu-hor li .sys-icon.thumbs-up {
font-size: 1.2rem;
}
.bx-menu-hor li .sys-icon.share-alt {
font-size: 1.2rem;
}
.bx-menu-hor li .sys-icon.ellipsis-h {
font-size: 1.2rem;
}
However, when I go to my live site and add it there for Protean, it doesn't work. I had to manually change the main templates/css/menu.css to make is work by doing this:
.bx-menu-hor li .sys-icon {
display:inline-block;
vertical-align:middle;
font-size: 1.2rem;
}
I have tried adding both ways on my live site in the custom styles area (cleared caches) and couldn't get it to work. I'd rather not have to edit the menu.css file. What am I doing wrong?
-
Hello Chris!
Did you notice any errors during the saving procedure of this custom styles? Does it keep your changes? If yes, then provide me via the Messenger your admin access details.
-
Hey LeonidS - I did not get any errors when I saved the changes however, the changes I made did not reflect on the website. Strange thing is, It works just fine on my test site. I do have some other custom CSS in there but it shouldn't be affecting this.
-
Try for force CSS styling overriding:
.bx-menu-hor li .sys-icon.comment { font-size: 1.2rem !important; } -
Hey Alex T⚜️ - Unfortunately, that did not work.
-
Then I think that CSS rule is incorrect, if you point out where exactly you want to change it and in which template then it would be easier to help you, also Lucid template is using bigger icons by default, so maybe just use Lucid template ?