On a general note: The component is forked from the official Featured Tiles Component. The whole idea and motivation for me was to have a cards-look with the functionality that component offers. I don’t think I’ll add any more functional features over the original component. The reason is that with regards to code maintenance I want to be able to just follow the compatibility fixes of the official component.
In case anyone’s interested: We modified the featured cards component to allow users to scroll horizontally through all featured topics (topic source used: latest).
This is the CSS used:
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
-ms-overflow-style: none; /* Hide the scrollbar for MS Edge */
scrollbar-width: none; /* Hide the scrollbar for Mozilla Firefox */
scroll-snap-type: x mandatory;
scroll-padding: 8px;
}
.featured-card {
scroll-snap-align: start;
}
.featured-cards-container::-webkit-scrollbar {
display: none; /* Hide the scrollbar on Webkit based browsers (Chrome, Safari, etc) */
-webkit-overflow-scrolling: touch; /* On touch screens the content continues to scroll for a while after finishing the scroll gesture */
}
the image shown is Category Image. I am using Air Theme. Application to show featured topics related to that category from it’s subcategory Frontier news.
There is no setting to control the max title characters. However, you can increase the cards height setting to fit the content.
If you don’t want to adjust every time, you can try this CSS in your theme or a component.
It removes the card height limit, and you have the following options:
Thanks, I actually had your defined height of 350 before posting but I just tried your code and appears to adjust the card size appropriately for titles with excerpts.
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
scroll-snap-type: x mandatory;
scroll-padding: 1.25rem;
/* Makes scrollbar tangible but invisible */
scrollbar-width: auto;
scrollbar-color: transparent transparent;
/* Or displays it but thin */
// scrollbar-width: thin;
// scrollbar-color: #91919185 transparent;
/* Ensures the scrollbar is right below the container instead of below the max height. */
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
I’m not sure it’s a good idea to hide the scrollbar on a desktop; it can be frustrating to access it.
Thin and visible (also making the background transparent) look fine to me. What do you think?