Bonjour, à tous et bonne année !
J'ai crée un pour mon blog sous wordpress, un page d'archive qui présente tous les articles. Cette page est responsive. Elle est visible là : http://blocnotes.iergo.fr/notes/
Chaque ligne est composé de la manière suivante :
(date de publication - nbr de com.) (Titre de l'article qui peut être très long)
A plus de 768px, Si le titre est trop long il vient se positionner comme ça, sous le début du titre, sans empiéter sur la date :
(date de publication - nbr de com.) (Titre de l'article
----------------------------------------------- qui peut être très long)
En dessus de 768px, ça présente d'office comme ça :
(date de publication - nbr de com.)
(Titre de l'article qui peut être très long)
Jusque là tout va bien !
Sauf que moi je joue avec la fenêtre pour voir le rendu et là petit soucis, quand j'agrandis la fenêtre, le titre ne repasse pas sur une ligne, mais reste sur deux lignes. mais pourquoi ???
La css est assez simple (peut être trop) :
.titre-note la classe du titre
.entry-note la classe de la date+com
Voila, j'ai sans doute oublié un truc évident, mais je ne vois pas donc je suis preneur de toutes idées !
Modifié par Yaka (12 Jan 2014 - 23:47)
J'ai crée un pour mon blog sous wordpress, un page d'archive qui présente tous les articles. Cette page est responsive. Elle est visible là : http://blocnotes.iergo.fr/notes/
Chaque ligne est composé de la manière suivante :
(date de publication - nbr de com.) (Titre de l'article qui peut être très long)
A plus de 768px, Si le titre est trop long il vient se positionner comme ça, sous le début du titre, sans empiéter sur la date :
(date de publication - nbr de com.) (Titre de l'article
----------------------------------------------- qui peut être très long)
En dessus de 768px, ça présente d'office comme ça :
(date de publication - nbr de com.)
(Titre de l'article qui peut être très long)
Jusque là tout va bien !
Sauf que moi je joue avec la fenêtre pour voir le rendu et là petit soucis, quand j'agrandis la fenêtre, le titre ne repasse pas sur une ligne, mais reste sur deux lignes. mais pourquoi ???
La css est assez simple (peut être trop) :
.titre-note la classe du titre
.entry-note la classe de la date+com
#notes .titre-note {
display: table-cell;
padding: 10px 0 0;
}
@media screen and (min-width: 768px) {
#notes .entry-note {
display: table-cell;
}
Voila, j'ai sans doute oublié un truc évident, mais je ne vois pas donc je suis preneur de toutes idées !
Modifié par Yaka (12 Jan 2014 - 23:47)
