As the title says, I’m using the free Solo theme and I’d like to hide the feature image that is displayed on posts, but continue to use it for post thumbnails on the Home Page.
With help from other posts on these forums, I’ve managed to use the following code injection to hide posts:
<style>
.gh-article-image { display: none;}
</style>
It’s working successfully. However, the post Title and Excerpt are no longer aligned with the post content, but rather they are now left-aligned with the post author name and date.
You can see what I mean with the following examples.
Post without a feature image (what I want it to look like): Episode 21: Memorable Queer Characters in TV Shows
Post with a feature image hidden (what I don’t want it to look like): Episode 22: Memorable Queer Characters in Books and Video Games
What CSS do I need to set the alignment back to the way it is with no feature image, without completely breaking everything across different browsers and devices?
Much appreciated.
There are 3 ways to accomplish this:
1. CSS Only Code Injection:
<style>
.gh-article-image { display: none;}
.gh-article-header {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.gh-article-title,
.gh-article-excerpt {
grid-column: 4 / 10;
}
@media (max-width: 768px) {
.gh-article-header {
display: block;
}
.gh-article-title,
.gh-article-excerpt {
grid-column: unset;
margin-left: 0;
padding-left: 0;
}
}
</style>
2. JavaScript Code Injection: 
Potential Layout Shifts
<style>
.gh-article-image { display: none;}
@media (max-width: 768px) {
.gh-article-meta {
grid-row-start: 2;
}
}
</style>
<script>
(function() {
'use strict';
function moveArticleHeader() {
const postTemplateBody = document.querySelector('body.post-template');
if (!postTemplateBody) {
return;
}
const headerElement = postTemplateBody.querySelector('.gh-article > .gh-article-header');
if (!headerElement) {
return;
}
const targetSection = postTemplateBody.querySelector('.gh-article > .gh-content');
if (!targetSection) {
return;
}
const originalDisplay = headerElement.style.display;
headerElement.style.display = 'none';
targetSection.insertBefore(headerElement, targetSection.firstChild);
requestAnimationFrame(() => {
headerElement.style.display = originalDisplay;
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', moveArticleHeader);
} else {
moveArticleHeader();
}
})();
</script>
3. Edit theme files Possibility of loosing changes when updating theme
Open post.hbs file and delete lines 7 to 15.
Delete these:
{{#if feature_image}}
<header class="gh-article-header gh-canvas">
<h1 class="gh-article-title">{{title}}</h1>
{{#if custom_excerpt}}
<p class="gh-article-excerpt">{{custom_excerpt}}</p>
{{/if}}
{{> "feature-image"}}
</header>
{{/if}}
Now paste below lines just after <section class="gh-content gh-canvas">
Paste these:
<header class="gh-article-header gh-canvas">
<h1 class="gh-article-title">{{title}}</h1>
{{#if custom_excerpt}}
<p class="gh-article-excerpt">{{custom_excerpt}}</p>
{{/if}}
</header>
Code injection:
<style>
@media (max-width: 768px) {
.gh-article-meta {
grid-row-start: 2;
}
}
</style>
NOTE: These changes are a good starting point. I have not tested it extensively.
1 Like
Thank you for your help! I’ve used the second method with javascript as the first method still showed the author/date container lower than the heading, and the third I’ll use as a last resort if I encounter any weirdness with the layout that I can’t fix myself. Seems fine for now though. Much appreciated. 
1 Like
