Headers - left align (too far left!)

[Mark_Woolnough]

Hi,
I’m trying to use the new headers to reproduce the current look of my site.

However when I use the left align in the header, the published /preview version is a lot more left aligned that the in the editor version - to the point their is no margin / padding at all.

Screenshot attached.

Can someone help?

URL: www.logistically.co.uk (though the question I’m asking is not live on the site yet)

• Latest version of ghost
• Ghost pro - 5.86.2+moya
  And

[jannis]

This is mainly a theme issue.

The cards that Ghost produces all have certain CSS classes that tell the theme what to do with them.

The html generated by the card should look somewhat like this:

<div class="kg-card kg-header-card kg-v2 kg-width-full kg-content-wide kg-style-accent" data-background-color="accent">
    <div class="kg-header-card-content">
        <div class="kg-header-card-text kg-align-center">
            ...
        </div>
    </div>
</div>

Note the kg-width-full class.

This needs to be handled in your theme.

[Michael_McGinnis]

For example, in code injection this might work:

<style>
.kg-width-full {
     padding-left: 1em
}
</style>

[Mark_Woolnough]

Thanks - but no the code injection did not work

So the live website looks noting like what the preview in Ghost showed me

Logistically

[Cathy_Sarisky]

The embedded preview can be a little funky with styles that are using the width of the page, but you can get a full screen preview that should be more reliable. Click the pop out (box and arrow) symbol right next to the copy symbol on the fake browser header in the preview.

As to how to actually fix the problem, I assume you want the boxes to match the text. So you’ll need to examine the css for the boxes and duplicate it for the text. Be sure to check multiple widths.