# After Update posts are not formated right / show full post on home

**URL:** <https://forum.ghost.org/t/after-update-posts-are-not-formated-right-show-full-post-on-home/40340>\
**Category:** Developer help\
**Created:** [August 8, 2023, 7:18am UTC](https://forum.ghost.org/t/after-update-posts-are-not-formated-right-show-full-post-on-home/40340 "2023-08-08T07:18:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tgodtaylor](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/tgodtaylor/32/24885_2.png) [@tgodtaylor](https://forum.ghost.org/u/tgodtaylor)\
**Post date:** [August 8, 2023, 7:18am UTC](https://forum.ghost.org/t/after-update-posts-are-not-formated-right-show-full-post-on-home/40340/1 "2023-08-08T07:18:09Z")

</div>

Hello,

I configured ghost so it displays featured posts on the startpage. Problem is, after the latest Update ghost can’t format the Desktop CSS anymore. Only the width for phone works.

At the moment I’m trying to display full posts on the startpage which are marked as featured. This doesn’t work at all and I need to use the excerpt. The next problem is, it isn’t formatted and it looks ugly. All users need to press on the text or title to see the post well formatted.

Any ideas how to accomplish to show a post fully like in the post.hbs?

The featured-post.hbs looks like this:

> **featured-posts.hbs**
>
> onst { SafeString } = require(“handlebars”);  
> const GhostContentAPI = require(“@tryghost/content-api”);  
> const api = new GhostContentAPI({  
> url: process.env.GHOST\_API\_URL,  
> key: process.env.GHOST\_CONTENT\_API\_KEY,  
> version: “v4”  
> });
> 
> async function getFeaturedPosts(options) {  
> const { limit = 3 } = options.hash;  
> const posts = await api.posts.browse({  
> filter: “featured:true”,  
> limit: limit,  
> fields: “title, slug, excerpt, feature\_image”  
> });  
> let output = “
> 
> ”;  
> posts.forEach(post =\> {  
> output += ` <li> <a href="/${post.slug}"> <img src="${post.feature_image}" alt="${post.title}"> <h2>${post.title}</h2> <p>${post.excerpt}</p> </a> </li> `;  
> });  
> output += “
> ”;  
> return new SafeString(output);  
> }
> 
> module.exports = getFeaturedPosts;

The post-page.hbs

> **post-page.hbs**
>
> {{!-- This is a partial file used to generate a post “card”  
> which templates loop over to generate a list of posts. --}}
> 
> ```
> {{#if feature_image}}
> <a class="post-card-image-link" href="{{url}}">
> 
> {{!-- This is a responsive image, it loads different sizes depending on device
> https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
> <img class="post-card-image"
> srcset="{{img_url feature_image size="s"}} 300w,
> {{img_url feature_image size="m"}} 600w,
> {{img_url feature_image size="l"}} 1000w,
> {{img_url feature_image size="xl"}} 2000w"
> sizes="(max-width: 1000px) 400px, 800px"
> src="{{img_url feature_image size="m"}}"
> alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
> loading="lazy"
> />
> 
> {{#unless access}}
> {{^has visibility="public"}}
> <div class="post-card-access">
> {{> "icons/lock"}}
> {{#has visibility="members"}}
> Members only
> {{else}}
> Paid-members only
> {{/has}}
> </div>
> {{/has}}
> {{/unless}}
> 
> </a>
> {{/if}}
> 
> <div class="post-card-content">
> 
> <a class="post-card-content-link" href="{{url}}">
> <header class="post-card-header">
> <div class="post-card-tags">
> {{#primary_tag}}
> <span class="post-card-primary-tag">{{name}}</span>
> {{/primary_tag}}
> {{#if featured}}
> <span class="post-card-featured">{{> "icons/fire"}} Wichtig</span>
> {{/if}}
> </div>
> <h2 class="post-card-title">
> {{#unless access}}
> {{^has visibility="public"}}
> {{#unless feature_image}}
> {{> "icons/lock"}}
> {{/unless}}
> {{/has}}
> {{/unless}}
> {{title}}
> </h2>
> </header>
> {{#if excerpt}}
> <div class="post-card">{{content}}</div>
> {{/if}}
> </a>
> 
> <footer class="post-card-meta">
> <time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
> {{#if reading_time}}
> <span class="post-card-meta-length">{{reading_time}}</span>
> {{/if}}
> {{#if @site.comments_enabled}}
> {{comment_count}}
> {{/if}}
> </footer>
> 
> </div>
> 
> ```

It doesn’t matter which browser I use. Firefox or edge, the text is only on the left side in block but all css entrys for post-page have no block or grid order. Nether any effects appear after changing something in the screen.css or global.css for post-page.

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [August 8, 2023, 7:53am UTC](https://forum.ghost.org/t/after-update-posts-are-not-formated-right-show-full-post-on-home/40340/2 "2023-08-08T07:53:45Z")

</div>

Your JavaScript isn’t getting the post content (which should be in the html field), so it’s not a surprise that it isn’t appearing on the page. If it did so previously, it wasn’t due to this code.

No clue why your css isn’t applying, but I’ll guess that the theme update changed a selector in some way that doesn’t match your layout?

Oh, just a note: many themes need their css compiled. If you’re changing the source file but aren’t seeing changes, that may be to blame.

---

<div class="post-metadata">

**Author:** ![tgodtaylor](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/tgodtaylor/32/24885_2.png) [@tgodtaylor](https://forum.ghost.org/u/tgodtaylor)\
**Post date:** [August 8, 2023, 10:00am UTC](https://forum.ghost.org/t/after-update-posts-are-not-formated-right-show-full-post-on-home/40340/3 "2023-08-08T10:00:50Z")

</div>

Hah! Nice, thanks for the hint!  
That was everything. I had to run `npm install` in the theme folder of Casper. Then I could use `gulp zip`, and now it works like a charm. Well, almost. I’m still facing issues in the `screen.css` with the max width at some point in the `@media` queries.

Right, the JavaScript has no usage. The posts are coming from `post-page.hbs` and `default.hbs` templates. I thought I couldn’t display the entire post on the start page, so I used excerpts and removed the limitations.

I already tried using `content` and `post`, but it had no effect. How can I display the entire post content in the post format at the startpage? This could fix my css problem too that appears after every update.

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [August 8, 2023, 10:05am UTC](https://forum.ghost.org/t/after-update-posts-are-not-formated-right-show-full-post-on-home/40340/4 "2023-08-08T10:05:28Z")

</div>

You can definitely put content on the front page. You want the {{content}} helper for that. 🙂