Featured Topics

Theme component
45

Thx for the update! :heart:

WIth some CSS hacks I moved the avatar as a layover over the thumbnail in card mode:

.featured-topics__topic-details .topic-author {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

How can I reduce the height of the (purple) topic author div to 0 and effectively remove the gap while still displaying the avatar?

Screenshot 2025-02-19 at 20.55.50
Screenshot 2025-02-19 at 20.55.50681×499 48.8 KB

1 Like
48

If you’re writing custom CSS, then rather than adding code that overwrites one of the pre-set layouts, I’d actually recommend you pick None as layout option in the theme settings and declare your styles from scratch.

For example, you could copy the default Cards stylesheet and declare the featured-topics__topic-details container as a grid. Then you can position it’s elements exactly as you like, rather than moving them around with absolute declarations.

2 Likes
49

That’s a great idea!

For now, we are happy with the template and just a few little CSS tweaks to initially test it. Once we get to CTR optimization phase, we will probably follow your advice. :slight_smile:

2 Likes
50

Not sure if this is expected behavior or if it could be considered a bug:

When three topics are set in the settings, but only two are displayed, a gap appears where the third topic should be. It would be ideal if the cards were resized to fill the entire width in such cases.

CleanShot 2025-02-20 at 13.49.38
CleanShot 2025-02-20 at 13.49.38959×482 15.2 KB

51

If anyone is interested in using horizontal scroll on mobile, here some CSS that “I” came up with (with the help of AI). It also includes some scroll snap and size adjustments that I found more suitable for our use case.

PS: I also tried to make some navigation pills without adding HTML, but that definitely was a stretch.

@media (max-width: 750px) {
  .featured-topics__topic-wrapper {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 1em 10vw; /* Side padding for neighboring card visibility */
    gap: 1rem; /* Consistent spacing between cards */
    overscroll-behavior-x: contain; /* Prevent overscroll interference */
    scroll-behavior: smooth; /* Smooth scrolling */
    scrollbar-width: none; /* Hide scrollbar */
    -ms-overflow-style: none;
  }

  .featured-topics__topic-wrapper::-webkit-scrollbar {
    display: none; /* Hide scrollbar in WebKit browsers */
  }

  .featured-topics__topic-container {
    flex: 0 0 80vw; /* Narrower cards for side visibility */
    min-width: 280px; /* Minimum width for small screens */
    scroll-snap-align: center; /* Center each card when scrolling */
    height: unset !important; /* Consistent height */
  }

  .featured-topics__topic-thumbnail {
    height: 40vw;
    width: 100%;
  }
}
52

Hi, thanks a lot for this component, love it!

Can someone by chance help with adjusting the title size as it’s too big right now?