How to increase post width in Dawn theme?

Themes
1

I want to achieve the same result as in this post, however after tweaking a bit with CSS styles in Code Injection I can’t figure out anything that works for the Dawn theme (I’m using this fork with a few manual patches I applied).

If there are any resources that I missed feel free to link them as the only thing I was able to find about this topic is that one post.

My website is here.

2

Your content width is defined by this CSS:

.kg-canvas {
    display: grid;
    grid-template-columns: [full-start] minmax(4vw,auto) [wide-start] minmax(auto,140px) [main-start] min(640px,calc(100% - 8vw)) [main-end] minmax(auto,140px) [wide-end] minmax(4vw,auto) [full-end];
}

Your content width is 640px, so to increase it(to 800px, you can change the value) you can try to add this in code injection:

<style>.kg-canvas { grid-template-columns: [full-start] minmax(4vw,auto) [wide-start] minmax(auto,140px) [main-start] min(800px,calc(100% - 8vw)) [main-end] minmax(auto,140px) [wide-end] minmax(4vw,auto) [full-end]; }</style>
1 Like
3

This works. Thank you very much.

1 Like
4

Hi @bironthemes - This code injection in Settings —> Code Injection → Site Header does not seem to work in the latest dawn theme (installed from the Ghost Admin Dashboard → Settings → Design). Any alternative to your earlier solution for the latest dawn theme?

5

I think the only change is the classname from kg-canvas to gh-canvas.
So the code injection is:

<style>.gh-canvas { grid-template-columns: [full-start] minmax(4vw,auto) [wide-start] minmax(auto,140px) [main-start] min(800px,calc(100% - 8vw)) [main-end] minmax(auto,140px) [wide-end] minmax(4vw,auto) [full-end]; }</style>
1 Like