Change layout of category archives on mobile

[fatcatgraphics]

Hi im trying to change the layout of the cat. archives for mobile view. As you can see in the attached photo the layout is Image on top, Title underneath. I want it to be Title on top, followed by image. How can I achieve this?

Im using Ethos, but the site is under construction. I will attache login info just incase.

Thank you for your help,
Rena

<img src="//tco-forum-uploads.s3.amazonaws.com/original/3X/d/d/dd2692374a0def03e36d7d00356c8a62a6edc6e8.png" width=“305” height=“500”>

[christian]

Hey Rena,

This would require template modification or overriding. In case you’re not aware, here’s our documentation for customizing our theme: https://theme.co/apex/forum/t/customizations-best-practices/205

The file that you need to override is content.php and it’s located in the \framework\views\ethos folder of the theme. You need to copy that file to the same folder in your child theme like x-child\framework\views\ethos.

Open the copied file in your child theme and you’ll see this block of code (as of this writing - this might change in the future).

    <?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; ?>

Cut the code and paste it below this line:

<?php x_get_view( 'ethos', '_content', 'post-header' ); ?>

Please take note of the syntax because missing to copy a character in the code can cause a fatal error in your website. If you’re not a developer, I’d recommend that you hire a third-party developer to do this for you.

You will also need additional CSS because the Ethos featured image has a negative top margin of 35px and once you move it below the title or the entry header, it will cover a part of the entry header. To override that, you will need to add this code in Theme Options > CSS.

.page .x-main.left .hentry .entry-featured, .single-post .x-main.left .hentry .entry-featured {
    margin-top: 15px;
}

Hope that helps.

[fatcatgraphics]

Thank you that worked great.

[Prasant]

You are most welcome.