Thumbnail align bouton ems tricks

Aligner les boutons "Lire la suite" pour les articles du blog

Le widget blog d'e-monsite est composé de différents élements qui n'ont pas toujours la même taille et les blocs s'en voient déséquilibrés. EMS Tricks vous montre comment avoir le bouton "Lire la suite" constamment à la même place selon le contenu.

Peu importe le contenu

Exemple avant / après de l'alignement du bouton e-monsite

Le soucis dans la présentation des articles du blog c'est qu'ils dépendent du contenu qu'on met à l'intérieur pour être parfaitement alignés. On est d'accord, compter les mots pour être sur que nos blocs aient la même hauteur est un peu.. pénible? Chez EMS Tricks on a voulu passer au dessus de ça et que tout soit automatisé selon le contenu qu'on y met !

Voici le code CSS :

[data-addon="blog"] .btn-default {
    position: absolute;
    bottom: 15px;
}

[data-addon="blog"] .media-content {
    margin-bottom: 4em;
}

Comment ça agit ?

Pour réaliser ce trick, on définit le bouton en valeur absolue. C'est à dire qu'on le place où on veut qu'il soit dans le bloc (il ne dépend plus du contenu du bloc pour se placer).

Afin que le bouton ne vienne pas devant la description, on met une grosse marge vers le bas au texte. Comme ceci, le texte le plus long poussera au maximum le bloc et le bouton ne sera jamais devant (le texte plus court aura donc une marge qui sera dans le vide).

Alignement boutons

Envoyez-nous vos sites !

Chez EMS Tricks on est friand de voir ces trucs et astuces en action sur vos sites e-monsite ! Vous pouvez nous les envoyer ici ou même nous soumettre vos propres tricks :).

blog articles css webdesign bouton