- This topic has 3 replies, 2 voices, and was last updated 4 years, 5 months ago by
Sebastian.
| Author | Posts |
|---|---|
 deanphillips1991
November 26, 2019 at 12:23 pm
|
I made a custom selector for the body font-size, but it doesn’t seem to have any effect atm. It seems to be working inside of MT but not the actual live site. No caching in enabled and it’s not on draft mode. https://www.loom.com/share/e1c69cab4fd4487dad117b201fdfb959 My body font size is 20px and I’m using ems on my headlines, but I’m trying to make that 16. No doubt I’ve done something wrong. EDIT: This seems to be the case for headlines too. |
 Sebastian
November 26, 2019 at 1:45 pm
|
Hey Dean, The font-size:12px rule in Microthemer is being overridden by another stylesheet rule that has the same CSS specificity score (1), but comes later in the HTML source order and so takes effect. You can fix this by increasing the specificity of your body selector e.g.
See a full explanation in this video: http://somup.com/cqXOIpf0S1 Cheers, |
|
deanphillips1991
November 26, 2019 at 2:37 pm
|
Awesome, thanks so much for that. Worked perfectly. 1. Is there any tutorials or resources to find out the best selectors to choose for things going forward (so I don’t have to bother you)? 2. Does using the !important tag have any negatives in your opinion? A theme I used to have used it for everything, but I don’t really use it these days. 3. I’m trying to add default section paddings inside of Oxygen so when they aren’t overwritten (for example, #section-367-59 > .ct-section-inner-wrap) they follow the custom ones in MT. The reason for this is Oxygen gives us global padding (just like font sizes) but only for desktop and not other breakpoints. What would be the best way to do this? – If that makes no sense, here’s a video to explain what I meant more https://www.loom.com/share/6d5d89b48bd0480283b081cd4cebb587 Thanks, |
|
Sebastian
November 26, 2019 at 4:22 pm
|
Hey Dean, 1. For understanding specificity 2. The trouble with !important is that it’s hard to override if you’re applying CSS styles outside of Microthemer, and you want to override an MT style with !important. You have to use !important again, which is not ideal. MT has !important enabled by default for the benefit of beginners. I think the benefits outweigh the negatives for beginners. But you’re fairly comfortable navigating HTML and CSS, so you might prefer to not have !important auto-added. If you’re happy with MT always trumping other CSS styles however, you may want decide it’s quicker to enable !important globally. Some may judge you for this, I won’t 🙂 As for slowness, I read !important might add a tiny bit of time. And then I also read that’s a myth. If you are not enabling !important globally, as I see from your video, it’s best to match, or or be slightly higher than the specificity of the rules you want to override. 3. Could you just use the same selector in MT:
And then set important if you need to? Or have I misunderstood. Cheers, P.S. you disabled !important in your video when you were trying to enable it, I think that’s why you got a bit confused. |
