Ethos Carousel Font size and hover fix

Support
#1

Hi,

I’ve solved a whole bunch of layout problems so far, but this last one is a tough monster to fix.
My site is running Ethos stack: https://bestweldingsupplies.com/

Now you can see on the site homepage the carousel is a total wreck.
I’ve added a bunch of custom CSS (to solve layout issues) that probably overrides the font size, this includes the following (which is probably relevant):

h1, .h1 {
font-size: 3.2em !important;
}
h2, .h2 {
font-size: 2.2em !important;
}
h3, .h3 {
font-size: 1.7em !important;
}

Also, I’ve added the following custom CSS to fix the titles somewhat:

.single .entry-featured {display:none;}
.h-entry-cover span {
overflow: visible;
text-overflow: initial;
white-space: normal;
}
.h-entry-cover {
top: calc(100% - 4.5em);
}

I want to solve two things:

  1. Font size should be ‘readable’
  2. On hover, I just want the words “view post”, instead of the current Author name, Category and Publishing date.

How can I fix this to become readable (on all devices)? Is the carousel title an H1 or something else?

Thanks,
Arnold

#2

Hello Arnold,

Thanks for writing in!

1.) You have change the font size and now the text is close to each other. You will need to adjust the letter spacing. To do that, please go to X > Theme Options > Typography > Headings.

2.) Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Custom Entry Cover
// =============================================================================

if ( ! function_exists( 'x_ethos_entry_cover' ) ) :
  function x_ethos_entry_cover( $location ) {

    if ( $location == 'main-content' ) { ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php x_the_alternate_title(); ?></span></h2>
        </a>
      </article>

    <?php } elseif ( $location == 'post-carousel' ) { ?>

      <?php GLOBAL $post_carousel_entry_id; ?>

      <article <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span></h2>
          <div class="x-post-carousel-meta">
            <span class="entry-cover-author"><?php //echo get_the_author(); ?></span>
            <span class="entry-cover-categories">View Post</span>
            <span class="entry-cover-date"><?php //echo get_the_date( 'F j, Y' ); ?></span>
          </div>
        </a>
      </article>

    <?php }

  }
endif;

The carouse title is using h2.

We would loved to know if this has work for you. Thank you.

#3

Thanks for helping!

The first suggestion about the font size didn’t work for me. It only influenced the H2 for the blog post titles, not the carousel font sizes. Did I miss something in your instruction? To clarify:

  • I want to keep my body font size and post header font size the same
  • I only want to decrease the carousel titles font size

The second suggestion worked great, I installed the Child theme, and on hover the text is now correct. I was wondering if there is a way to remove the four white lines on hover? (look closely when hovering over a carousel item)

Thanks,
Arnold

#4

Hi There,

To remove the four white lines and reduce the font size, please also add this custom CSS:

.entry-cover .h-entry-cover {
    font-size: 14px !important;
}
.x-post-carousel-meta>span:before, 
.x-post-carousel-meta>span:last-child:after {
    display: none;
}

Hope it helps :slight_smile:

Ethos Post Carousel colors
#5

Wow. This solved both problems at once! You’re good at this. Thread can be closed.

#6

Glad it works now, cheers!

#8

Hi,

Apologies for not noticing this earlier.
After applying this solution, it turns out my featured images no longer show up in the blog Posts?
They do however work for the regular Pages.

Perhaps this has something to do with the code? I only noticed this after applying the solutions explained in this thread.

Thanks,
Arnold

#9

Hi There,

The featured image is hidden because of this custom CSS, please remove it:

.single .entry-featured {
    display: none;
}

Let us know how it goes!

#10

Yes, you’re correct. It’s fixed now :slight_smile:

#11

We are delighted to assist you with this.

Cheers!

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.