Liens en vrac

Solution « responsive » pour afficher 4 colonnes sur les webmails desktop et deux colonnes sur les webmails mobiles.

#container {
   max-height: 100%;
}

#container img {
   /* Keeps image from going outside the screen */
   max-height: 100%;
   max-width: 100%;
   /* Keeps image from beeing distorted */
   height: auto;
   width: auto;
   /* centering horizontally AND vertically */
   /* 50% of container */
   position: relative;
   top: 50%;
   left: 50%;
   /* 50% of image */
   transform: translate(-50%,-50%);
}

Comment transformer un tableau en un tableau responsive lisible sur des petits écrans

@media (max-width: 500px) {
/* table + tbody are blocks */
#mytable, #mytable tbody {
display: block;
width: 100%;
}

/* each row becomes table */
#mytable tr {
display: table;
margin-top: 20px;
width: 100%;
border-spacing: 5px 0;
}

/* each cell becomes a row (of the row that had become a table)  */
#mytable tr td {
display: table-row;
width: 100%;
}
}

Comment faire des triangles sans image avec un peu de CSS.

Centrer en CSS, c’est la base, et parfois, ce n’est pas si simple. Ce guide liste les techniques les plus connues pour réaliser cet effet centré.