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.

1 Like
8

Hi Cathy,

I’m new here and I’m using the Casper theme. I used your code in the injection panel and works great. Is there a way to increase the space only for one side of the page and keep a fixed space on the other one?

For exemple letting the text have more room on the right and keep a space for a navigation bar on the left.

Thank you!

9

Casper uses a grid (like many Ghost themes). The rules for that grid look like this:

.gh-canvas, .kg-width-full.kg-content-wide {
    --gap: max(4vmin, 20px);
    --main: min(var(--content-width, 720px), 100% - var(--gap) * 2);
    --wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
    --full: minmax(var(--gap), 1fr);
    display: grid;
    grid-template-columns: [full-start] var(--full) [wide-start] var(--wide) [main-start] var(--main) [main-end] var(--wide) [wide-end] var(--full) [full-end];
}

To skew that, you’d need to change the grid-template-columns definition to pass something different for full and/or wide on the left and right sides.

It’s just math, but it’s more math than I can do for you today on the forum.

You’ll also need to think a little bit about what happens with the navigation bar on mobile. :slight_smile:

1 Like
10

Hi,

I will try some tweaks here and there to see how it works.

Thanks Cathy!