When setting up my stylesheet I have styled “All Links” which works as long as I add an actual link object. But I have noticed that when I add a link to a rich text block it looks different (larger in this case).
I am new to Webflow but am wondering how I style the links which appear in rich text — I had hoped that they would pick up the style from “All Links” but apparently not.
Ok, this is weird. Both links appear to be targeted by the same code and the styles appear congruent, both font size 1.25em but the link object is rendering at 17.5px and the link in the rich text object is rendering at 21.875px! What the heck!
I do not understand. I get (conceptually) how they could be overridden within a rich text element.
But why are they being overridden within this particular rich text element? Do you mean expressly formatted inside the rich text element? I have not done that.
Are they overridden “automatically”? That is, does the rich text editor apply some random style to the links? Can I just turn that off?
Just looking for a simple, clean way to resolve this.
I just did the math. The link within rich text (1.25em) is rendering at 21.875px with is 1.25 times 17.5px — which is the font size of a paragraph and the expected size of the link text. It’s like it is applying the 1.25 multiplier a second time.
The default text in Body (All Pages) is set to 1vw
The font size for paragraphs is set to 1.25em
The font size for links is also set to 1.25em, so when there is a link inside a paragraph it seems to be multiplying by 1.25 again, making the links larger than the surrounding text.
I am trying to think of the cleanest way to resolve this.
Would it be to increase the size of the Body (All pages) font to 1.25vw? Then I would clear the font setting in All paragraphs and for link for that matter, so both it and the link would default to the font size for Body (All pages). I would have to revise the whole style sheet, but it would be clean.
Using vw units as a font size seems very unconventional to me.
I’d expect weird consequences.
Second, read up on em’s v. rem’s. It looks like your sizes are inheriting from the contain, so think of it like a magnifying glass on top of a magnifying glass- you get a compound effect. I suspect rem’s would work better for you in your design approach.
Nick rider here,
I have same question how i style links in rich text?
According to my stylesheet, I have styled “All Links”, which only works if I add an actual link object. However, I noticed that when I add a link to a rich text block, it appears larger.
In my first year with Webflow, I have a question about styling the links which appear in rich text - I was hoping they would be styled from the “All Links” section, but they don’t seem to be.
I would greatly appreciate any help you can provide in this comment.
Hey @Nick_Rider are you using em units for the font sizes for all-links and all-paragraphs?
This was ultimately the same problem for me. I had set paragraphs to 1.25em and had set all-links to 1.25em. In rich text, the link is inside a paragraph block so the paragraphs are already set to 1.25 times the body text and then the rich text link is showing as 1.25 times that size — effectively larger.
I ended up forcing the rich text links to the size I wanted but I suspect there is a much cleaner solution.