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

Commentaires

  • Kévin
    Bonjour,
    Je voulais savoir s'il était possible d'appliquer cette modification de la même façon pour les vignettes des articles dans le menu boutique ?

    Merci
  • Damien
    Bonsoir,

    Merci pour ce trick qui harmonise très bien le rendu des billets du blog.

    J'y ai ajouté une ligne pour le caler à droite "right: 15px;" car je trouve qu'il est plus naturel, pour naviguer vers la suite d'un article, de cliquer sur un bouton en bas à droite du cadre de présentation, plutôt que sur la gauche.

    Voici un aperçu du rendu obtenu :
    Image

    Cordialement,
    Damien.