Post title displays BELOW featured image in mobile viewing ? - Ethos

[drinksty]

Hi -
I was looking to make my post title appear above my featured image (as it does on Desktop). For some reason on Mobile, the post title appears below the featured image and its really strange. I’m using the Ethos theme. Is there any way I can make the post title (on recent posts/home blog) page appear over the featured image on Mobile like it does on Deskptop?

Thanks~!

[drinksty]

Basically this, but for the Ethos stack: https://theme.co/apex/forum/t/id-like-the-title-to-appear-above-the-featured-image/1523/4

[john]

Hello,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[drinksty]

I understand its not a pre-built feature with X, and I do have a child theme installed. However, I was hoping to just get the appropriate content.php coding that was provided for this customer (but for Ethos instead of Integrity): @RueNel

I'd like the title to appear above the featured image

I would just like my post titles to appear above the featured image. It doesn’t need to be specific to mobile or desktop, as I’m sure it will work for both. Thanks.

Edit: It looks like this person was able to accomplish this on the Icon stack as well, so I just need the same thing for Ethos.

Topic: Post Title Above Image Instead of Below | Themeco Community

[jade]

Hi there,

For Ethos stack, you can find the content.php file in /wp-content/themes/x/framework/views/ethos/.

Then try this code:

<?php

// =============================================================================
// VIEWS/ETHOS/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Ethos.
// =============================================================================

$is_index_featured_layout = get_post_meta( get_the_ID(), '_x_ethos_index_featured_post_layout',  true ) == 'on' && ! is_single();

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <?php if ( $is_index_featured_layout ) : ?>
    <?php x_ethos_featured_index(); ?>
  <?php else : ?>
    <?php x_get_view( 'ethos', '_content', 'post-header' ); ?>
    <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php if ( ! is_single() ) : ?>
          <?php x_ethos_featured_index(); ?>
        <?php else : ?>
          <?php x_featured_image(); ?>
        <?php endif; ?>
      </div>
    <?php endif; ?>
    <div class="entry-wrap">
      <?php x_get_view( 'global', '_content' ); ?>
    </div>
  <?php endif; ?>
</article>

Hope this helps.

[drinksty]

Hi @Jade , That worked great! Thank you so much for your reply.

The title is now however flush against the featured image. Is there a way to add a little space/padding between the title and the image? (and possibly reduce the large space above the title) so its balanced.

Thanks again !

[Prasant]

Hello @drinksty,

Can you please share website URL as I need to how those spacings are showing up?

Thanks.

[drinksty]

@Prasant
Thanks for your reply, I included the URL - please let me know if you need my login credentials with it

[jade]

Hi there,

Please update the previous code I provided to:

<?php

// =============================================================================
// VIEWS/ETHOS/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Ethos.
// =============================================================================

$is_index_featured_layout = get_post_meta( get_the_ID(), '_x_ethos_index_featured_post_layout',  true ) == 'on' && ! is_single();

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <?php if ( $is_index_featured_layout ) : ?>
    <?php x_ethos_featured_index(); ?>
  <?php else : ?>
    <div class="x-hide-lg x-hide-md x-hide-xl"><?php x_get_view( 'ethos', '_content', 'post-header' ); ?></div>
    <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php if ( ! is_single() ) : ?>
          <?php x_ethos_featured_index(); ?>
        <?php else : ?>
          <?php x_featured_image(); ?>
        <?php endif; ?>
      </div>
    <?php endif; ?>
    <div class="entry-wrap">
      <div class="x-hide-sm x-hide-xs"><?php x_get_view( 'ethos', '_content', 'post-header' ); ?></div>
      <?php x_get_view( 'global', '_content' ); ?>
    </div>
  <?php endif; ?>
</article>

Hope this helps.

[drinksty]

This fixed the issue perfectly on desktop, however on Mobile, the Post Title is still crammed on top of the Featured Image and theres a large space above the title. Is there a way to fix it via CSS maybe?

Thanks for your support !

[jade]

Hi there,

Please try:

@media (max-width: 767px) {
    .entry-header .entry-title {
        margin-bottom: 0.8em;
    }
}

Hope this helps.

[drinksty]

That helped! Would it be appropriate to use

“margin-top: -0.8em”

to eliminate the space above the title?

[Prasant]

Hello @drinksty,

I suggest you to remove that code and use following instead:

@media (max-width: 767px) {.offset.cf {margin-top: 0.2em;}}

Thanks.