How to adjust width of blog posts?

[cellarmelody]

Hi,
Can you please tell me how to change the width of blog posts so the text appears in a narrower column?

My blog is here: https://chromacopy.co/writing/how-to-write-in-divided-times/
I have tried the below CSS but it doesn’t work.

    .single-post .x-site > .x-container.width {
max-width: 800px;
}
  .single-post .x-container.max.width.main {
    max-width: 100%;
    width: 80%;
}

Also, I tried this:

.x-container.max {
    max-width: 800px;
}

And it worked, but obviously changed all my other pages too. I only want to change the blog.
Thank you!

[christian]

Hey @cellarmelody,

You need to add the .single-post selector before the code that works like:

.single-post .x-container.main {
    max-width: 800px;
}

I just changed max to main in the code as that would be the best selector to use because it is specific.

This selector: .single-post .x-container.max.width.main should also work but the overall code didn’t work because your width is max-width:100%. There’s also no .x-site selector. It should be .site.

I’d recommend that you learn how to inspect an element in the browser to get the proper selectors. You can get started with Chrome Dev Tools: https://developers.google.com/web/tools/chrome-devtools/

Please also note that I’ve explained about CSS only in the context of our theme. Generally explaining about or giving custom code is actually not covered in our product support. I’d recommend that you learn CSS in sites like https://www.w3schools.com/css/default.asp

Hope that helps.