Tweet
Bonjour à tous,
Récemment (sur le Facebook du groupe Afuj ou sur le présent forum, je ne sais plus
) quelqu'un demandait comment fonctionnait le Layout Horizontal du Module Newsflash.
En effet, juste sélectionner "Layout Horizontal" ne semble pas changer le design en front-end.
En fait, il suffit d'ajouter un peu de css (par exemple dans son custom.css).
On pourrait alternativement faire un Layout Override, mais ce dernier dépend alors p ex de la version de Bootstrap.
Tandis qu'ici j'utilise ici CSS Grid et ça suffit !
Récemment (sur le Facebook du groupe Afuj ou sur le présent forum, je ne sais plus
) quelqu'un demandait comment fonctionnait le Layout Horizontal du Module Newsflash.En effet, juste sélectionner "Layout Horizontal" ne semble pas changer le design en front-end.
En fait, il suffit d'ajouter un peu de css (par exemple dans son custom.css).
On pourrait alternativement faire un Layout Override, mais ce dernier dépend alors p ex de la version de Bootstrap.
Tandis qu'ici j'utilise ici CSS Grid et ça suffit !
Code:
/* Module Newsflash avec Advanced > Layout > Horizontal (+ un peu de css grid) */
/* nb : le fait d'ajouter le Layout Horizontal fait qu'on a une structure <ul> et une classe newsflash-horiz */
/* le repeat avec auto-fit et minmax permet d'être responsive sans même faire de media query */
ul.newsflash-horiz.mod-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-gap: 20px;
padding-left: 0;
}
ul.newsflash-horiz.mod-list > li {
list-style: none;
background: #eee;
padding: 10px;
}
Commentaire