I just need to change the paragraph font of my blog posts from 14PX to 14EM. It should be straightforward, but none of the documentation makes any sense. I’ve looked through the documentation here
And here
I have tried changing the typography here, but it does nothing
I figure there should be someplace in the system with a named CSS class, but I cannot figure out how to edit it. I can see the class here, but I have no ability to edit it.
What am I missing?
Hi @Christian_Findlay you are missing read-only link in first place, secondly it looks to me that you are trying to customise RTE. If it is RTE you are trying modified please refer to WF documentation or search this forum with appropriate keywords.
<your-site>.webflow.io subdomain where you can view the live site with custom code running. It is important to share this link, as custom code does not run in the Designer.Go to the body element for your page, then look near the styles textbox where you can create/apply classes. There should be a blurb about the body element inheriting 1 selector. If you click that, it will show the styles that your body inherits from, including the “Body (All Pages)” style. Select that style. This is where you would make changes to affect all body elements on your site. It’s a bit bizzare how they have this laid out.
Thanks. Yes, I have done this up to the last part, which is where I took a screenshot of the above Body (All Pages). But I can’t edit anything. It’s just a read-only view of the CSS, as you can see above.
Edit: Actually, I figured it out, I think… I still haven’t been able to solve the problem, but the UI you explained seems to work. It’s extremely confusing. Now I have a bigger problem.
@dw1337 it seems I have bumped the list style inside blog posts. It displays as gibberish
But, this is how it appears in the editor.
So, my public site is completely wrecked right now
I have bumped the formatting of lists somehow. How do I edit the format of list items? This is what I’m seeing on my website:
This is what I see in the editor:
My readers cannot read anything in any bulleted list. Please help.
Here is my public share link: Git Submodules Vs. NuGet Dependencies
Update: I had to restore to a five day old backup because my whole site got destroyed somehow
14 em is why. That you can easily fix. You really should consider REM units instead.
.blog-post {
display: block;
width: 85%;
margin-right: auto;
margin-left: auto;
font-size: 14em;
}
@webdev I’ve been trying to figure out how to modify styles for days. This is how I ended up changing something, but I have no idea what I changed. I ended up having to restore the whole site and redo everything.
I.e. how to I change that style?
Please include your site’s Read-Only Share Link with your question.
A read-only link allows the community to view your project without making any edits to it and help diagnose your issue or provide feedback.
@webdev
https://preview.webflow.com/preview/christianfindlay-com?utm_medium=preview_link&utm_source=dashboard&utm_content=christianfindlay-com&preview=75a1cfbfba8a296f3d5947a95c7c7731&workflow=preview
I should mention that when I checked via this share the font-size was 14 px. When I looked before it was 14em. So the problem looks to be fixed on the restore.
@webdev, as you can see, this only styles lists. It does not style the main blog content.
@webdev I’m pretty sure that what I need to edit is here, but it’s read only. I cannot figure out how to edit it.
A lot of the documentation talks about editing a rich text block. Firstly, you have to add one to a page to be able to that and that messes up the page. Secondly, all I see is this.
Just as you would inspect/write the code you produce in an editor like visual studio, a web developer inspects the code of a published site by using a browsers devtools. From there you can see what CSS styles are affecting which elements you inspect. Webflow has base styles for many elements which you can override. I won’t bother trying to teach a lesson on CSS in a blog post, as there are more thorough references available online. MDN is the gold standard. When it comes to implementing styles in the designer, I recommend you watch / read the tutorials in the University.
It turns out that I can edit the “Typography” for all paragraphs like this.
But, here’s the kicker: it doesn’t allow me to edit the CSS directly. It seems to do some weird translation from REM to PX. When I changed the value to 1.25 REM, the CSS does change, but it bumps the PX up to an unexpected absolute value.
@webdev what I am trying to do is directly edit the CSS. I do not want the CMS getting in the way and doing translations into CSS. Is there any way to directly edit the CSS? Or, is that sealed off from me?
Why is there no option for sizing with PT?
