Thumbnail blog colonne

Passer le blog e-monsite sur 3 ou 4 colonnes selon les pages

Le thème Smart d'e-monsite nous permet de choisir l'affichage des billets de blog sur une ou deux colonnes. On vous montre l'astuce CSS pour les passer sous 3 ou 4 colonnes !

CSS uniquement

Cette astuce est toute simple et ne se réalise qu'en CSS ! On y intégrera des @media pour un responsive optimal !

Sur trois colonnes

3 colonnes exemple blog e-monsite

Le widget "Derniers articles du blog" permet de présenter sur une page les derniers billets publiés. Pour que cette astuce fonctionne, il vous faudra au minimum trois articles publiés et affichés.

Pour que les billets soient sur deux colonnes, le thème dit aux blocs (enfant) de faire "50%" de la taille de leur conteneur (parent). Quand vous choisissez de n'être que sur une colonne, l'enfant prendra "100%" de son parent. (Logique du coup)
La technique va être de passer les colonnes à "33,33%" (100 / 3).

Vous pouvez voir ce trick en action sur la page d'accueil de EMS Tricks.

Voici le code CSS :

#id_de_la_page .media-blog > .media {
    width: calc(33.33% - 25px);
    margin: 0 5px; /*Les marges entre les blocs*/
}

@media only screen and (max-width: 991px) {

#id_de_la_page .media-blog > .media {
    width: 100%;
    margin: 0 auto;
    }
    
#id_de_la_page .media-blog > .media:not(:last-child) {
    margin-bottom: 25px;
    }
    
}

Sur quatre colonnes

4 colonnes exemple blog e-monsite

Pour afficher quatre colonnes, la technique est la même sauf que l'on divise "100%" par quatre cette fois ci.

Voici le code CSS :

#id_de_la_page .media-blog > .media {
    width: calc(25% - 25px);
    margin: 0 5px; /*Les marges entre les blocs*/
}

@media only screen and (max-width: 991px) {

#id_de_la_page .media-blog > .media {
    width: 100%;
    margin: 0 auto;
    }
    
#id_de_la_page .media-blog > .media:not(:last-child) {
    margin-bottom: 25px;
    }
    
}

Adaptation pour votre site

Vous devez remplacer le "#id_de_la_page" par l'id du body de la page sur laquelle le widget est activé. Vous pouvez le trouvez en regardant le code source de la page ou en inspectant l'élément via votre navigateur.

Connaitre l'id de sa page sur e-monsite

Beaucoup de tutoriels sur internet vous expliquent comment faire (celui ci par exemple), on se passera de vous expliquer.

Les @mediasont là pour retransformer les blocs en 100% sur mobile.

Si vous désirez effectuer cette astuce sur tous les billets de blogs en général, supprimez juste l'id devant la class comme ceci :

.media-blog > .media {
    width: calc(25% - 25px);
    margin: 0 5px; /*Les marges entre les blocs*/
}

@media only screen and (max-width: 991px) {

.media-blog > .media {
    width: 100%;
    margin: 0 auto;
    }
    
.media-blog > .media:not(:last-child) {
    margin-bottom: 25px;
    }
    
}

Trop de choix

Et voilà, vous avez désormais jusqu'à quatre choix pour présenter les derniers articles de votre blog ! Envoyez-nous vos sites avec le trick en action et on le mettra en avant ! :)

blog css responsive colonne presentation webdesign

Commentaires

  • Benjamin
    Un très bon tuto, simple à comprendre et terriblement efficace !