Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

La liste des membres dépasse de la page "membres" du site Web

vincent

Bon, j’ai une bonne et une mauvaise nouvelle. Je commence par laquelle ?

La bonne !!!

Ok :

La bonne, c’est que ya plein de membres qui ont nous on fait le plaisir de partager une présentation sur la page présentation et que c’est trop mimi !!!!!!! 🥰🥰🥰
La mauvaise, c’est que maintenant, sur téléphone, ça masque une partie des présentations ! Il va falloir permettre de scrooooler. 🥵🥵

Repo du dit script : https://github.com/club-1/members-presentation

vincent

h1, h2, footer {text-align: center;margin: 0;}


body {
    margin: auto;
    font-family: monospace;
    height: 100%;
    background-image: url(cabane.webp);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.member {
    cursor: pointer;
    color: white;
    border: 1px solid black;
    border-radius: 10px;
    padding: 11px;
    margin: 15px;
    height: fit-content;
}



.presentation {
    display: none;
    position: absolute !important;
    top: 0;
    left: 0;
    background: white;
    border: 1px solid black;
    color: black;
    width: fit-content;
    z-index: 10;
}

.presentation img {
    max-width: 100%;
}

.close {
    padding: 4px;
    text-align: right;
    font-size: 21px;
    width: fit-content;
    height: fit-content;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 5px;
    color: white;
}

.handle {
    cursor: move;
    border-bottom: 1px
 	black solid;
    height: 24px;
    background: black;
    color: white;
    text-align: left;
    padding-top: 9px;
    padding-left: 17px;
}

a, a:visited {
    color: blue;
}

html {
    height: 100%;
}

main {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    align-content: flex-start;
}

.content {
    overflow-x: hidden;
    height: 400px;
    width: 400px;
}

div:target {
    display: block;
}

footer {
    position: fixed;
    bottom: 1%;
    right: 1%;
    font-size: large;
}

footer a, footer a:visited {
    color: grey;
}

footer a:hover {
    color: blue;
}

Bon j’arrive plus à faire une PR depuis mon repo local donc, je copie colle ici ma solution pour ce problème.