How to change the page width

Using Ghost
1

Loving Ghost so far, but I haven’t been able to work out how to change the text width on a post.

If I post and image with the beta editor, using either WIDE or FULL setting, the text box below the image always looks so small in the middle of the screen.

Is there any way to make the text content boxes fill more of the screen ?

1 Like
2

This is theme specific. Please name the theme or link the site! :)

3

I am using the default Casper theme

4

In code injection:

<style>
:root {
    --content-width: 800px;
}
</style>

720px is the default - you can change the 800px from my example to whatever you like.

1 Like
5

thanks for that Cathy, it works on the default theme :slight_smile:

I am still setting my new site up looking at using the simply theme, but the same code injection doesn’t affect the content width on that theme, any idea why that would be different ?

6

Yes. Each theme is different. Some (i.e. the standard Ghost themes) do share some css styles, but there’s no guarantee that one theme’s code injection works on another, because they’re all different.

For Simply, it looks like the width is set in here:

.godo-canvas {
    grid-template-columns: [full-start] minmax(4vmin,auto) [wide-start] minmax(auto,240px) [main-start] min(680px,calc(100% - 8vw)) [main-end] minmax(auto,240px) [wide-end] minmax(4vmin,auto) [full-end];
}

It’s that 680px you’ll want to change.

This needs to go in <style> tags in code injection. If it doesn’t apply, try adding a !important just before the semicolon.

1 Like
7

Thank you so much for helping out Cathy, those style settings working great on the Simply theme now :smile:

I can focus on creating some interesting content, now that there is a lot less white space down the sides of the pages.

1 Like
8

What would be the setting for the Massively theme please? Code search results · GitHub