Preview at Editor and after Publishing are not same

[new]

Hey! I am actually new to Ghost CMS.
I tried to make a test page where I found out some difference in editor and after publishing the post. In fact, I was more impressed at the editor’s preview than the actual published one.

Theme: Solo

Here are few things which I am trying to sort out few differences in the actual one:

→ adjusting (to increase) the post’s width in a responsive way.

I did find some code for code injection for the header to get the expected result, but it was not responsive.

<style>
.post {
    position: relative;
    width: 100%;
    max-width: 3216px;
    word-wrap: break-word;
}

.gh-content, .gh-article-header {
    margin-left: -75px;
    margin-right: -50px;
}
</style>

→ spacing between main heading and the body.
→ font.

I went through a lot of resources, sites, and discuss for hours together before this.
Hence, after finding no precise solution, I took the confidence to post here for the help.

[new]

[Cathy_Sarisky]

Hello! Welcome to Ghost!

Each theme controls the post layout as the theme creator saw fit. So it’s hard to tell you what code injection you need without knowing what theme you’re using, or better yet, having a link to the site to make it easy to test the changes.

[new]

Hi! Thanks for the reply @Cathy_Sarisky .
The theme I am using is Solo.
I am currently running and testing on the development stage (localhost) before I could turn into the production environment (already setup), I wanted to fix the above mentioned issues.

[new]

Is it the fault of the theme or browser?
I see that there is lot unoccupied space on the left and right sides of the main text, though I realise the space for author section and feed also.
Any possible ways to stretch the main text wider by default?

Make Digest page width larger

Sure. That’s section.gh-content.gh-canvas { grid-template-columns: [full-start] minmax(var(--gap),auto) [wide-start] minmax(auto,240px) [main-start] min(var(--content-width,720px),calc(100% - var(--gap)*2)) [main-end] minmax(auto,240px) [wide-end] minmax(var(--gap),auto) [full-end]; } It’s the content-width you’d need to change, so replace min(var(--content-width,720px),calc(100% - var(--gap)*2)) with something like min(var(--content-width,900px),calc(100% - var(--gap)*2)) to make it a littl…

Changing post width?

I would like to make the width for my posts (and also pages) to be a bit wider. I know it’s possible by changing it in CSS or using Code Injection. But I can’t figure it out. I’ve included a screenshot of what I wanted to do [screenshot-www.joananicolas.com-2022.04.18-22_28_11]

How to change width of content area in Dawn theme?

The text area in posts in the Dawn theme is too narrow for me. What css code can I add to make it wider?

I did find some similar topics but unsure of the implementation.

[Cathy_Sarisky]

The Ghost editor does what it’s going to do. It isn’t intended to be a 100% WYSIWYG (what you see is what you get) representation of how the post will look, because each theme does things differently.

If you’re not getting what you want on the website (NOT in the editor), you’re going to need to adjust the theme or use some code injections. Solo uses a grid layout. I’d try this:

@media (max-width: 991px)
.gh-canvas>* {
    grid-column: 2/span 10 !important;
}
.gh-canvas>* {
    grid-column: 3/span 8 !important;
}

That tells the content section to use more of the grid squares than it currently does. So grid-column: 3/span 8 means start at column three and use eight columns (there are 12 total). And !important means to ignore the existing CSS rule and that this one ‘wins’.

[new]

Perfect!!
Thank you, grid layout was the thing in which I was unable to figure out the way to modify even after finding and trying several things so far. Apart from author section being overlapped (hopefully will find a way), now it is all good to go and progress.