Increase Posts Width

Using Ghost
1

Hi, I’m trying to make the post a little wider because I see wasted space on every side.
I’m using the EDITION theme.

I tried to modify the Header code under Settings > Code Injection > Site Header like this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/brands.min.css" integrity="sha512-+oRH6u1nDGSm3hH8poU85YFIVTdSnS2f+texdPGrURaJh8hzmhMiZrQth6l56P4ZQmxeZzd2DqVEMqQoJ8J89A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    .gh-head-menu .nav-twitter a {
        font-size: 0 !important;
    }

    .gh-head-menu .nav-twitter a::before {
        font-family: "Font Awesome 6 Brands";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .gh-head-menu .nav-twitter a::before {content: "\f099"}
    
 	@media (min-width: 992px) {
	  .col-lg-6 {
	    flex: 0 0 85% !important;
 	   max-width: 85% !important;
 	 }
	}
</style>

with no luck

Any hints on what I’m doing wrong?

Thanks,

2

Hey there!

I can suggest you this solution which worked for me by @Cathy_Sarisky but it may differ by theme:

3

Edition likely needs different code injection. Thanks for the tag - let me see if I can help you with this.

1 Like
4

In your code injection header (find that under settings):

<style>
.gh-canvas {
    grid-template-columns: [full-start] minmax(var(--gap),auto) [wide-start] minmax(auto,calc((var(--container-width, 1200px) - var(--content-width, 720px))/2)) [main-start] min(var(--content-width,720px),calc(100% - var(--gap)*2)) [main-end] minmax(auto,calc((var(--container-width, 1200px) - var(--content-width, 720px))/2)) [wide-end] minmax(var(--gap),auto) [full-end] !important;
}
</style>

Change all instances of 720px above to your desired width.
1 Like
5

Cathy_Sarisky’s suggestion worked. I increased from 720 to 1020px and it worked for my req. thanks again

1 Like
6

hi @Cathy_Sarisky , any chance you can help me. I have been trying to increase the width of the text in a page with Flair theme, but I am stuck. cant figure it out. Any idea? thanks in advance

7

Your theme uses a variable for content width. Try this, in code injection.

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

(Of course, you can play with the width setting to get it just as you like it.