Je but sur un problème d'affichage en mode mobile.
En mode ordinateur je vois toutes mes icones des que je passe en mode mobile mes premières icones sont coupé voir invisible car trop sur la gauche. (partie sections)
Voici le site :
https://intranet.easykode.com/
Voici mon HTML :
Code : Tout sélectionner
<!-- Section -->
<div class="container">
<div class="row justify-content-center">
<div class="col-10">
<div class="mt-3">
<h6>Sections</h6>
</div>
</div>
</div>
<?php if (!empty($sections)): ?>
<div class="row my-3">
<div class="col-12">
<div class="section-icons-container text-center">
<?php foreach ($sections as $section): ?>
<div class="section-icon">
<div class="section-img my-3">
<img class="img-fluid rounded-circle" src="<?php echo $section['urlImg']; ?>" alt="Section Image">
</div>
<div class="section-title"><?php echo $section['section']; ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<?php endif; ?>
</div>
<!-- Fin Section -->Code : Tout sélectionner
/* Affiche section */
.container {
overflow-x: auto;
}
.section-icons-container {
display: flex;
align-items: center;
justify-content: center; /* Centre les icônes horizontalement */
overflow-x: auto;
padding: 10px 20px; /* Ajoutez de l'espace à gauche et à droite */
white-space: nowrap; /* Empêche le retour à la ligne des icônes */
}
.section-icon {
position: relative;
flex: 0 0 120px; /* Ajustez la taille de l'icône selon vos besoins */
text-align: center;
margin-right: 10px;
}
.section-icon:first-child {
margin-right: 10px; /* Ajoute une marge négative à la première icône */
}
.section-img {
width: 100%;
max-width: 120px; /* Limite la largeur maximale pour éviter le dépassement */
height: 120px; /* Fixe la hauteur à 120 pixels ou à une valeur qui vous convient */
position: relative;
overflow: hidden;
border-radius: 50%;
margin: 0 auto; /* Centre l'image horizontalement */
}
.section-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
transition: transform 0.3s ease-in-out; /* Ajoute une transition en douceur */
}
.section-title {
color: whitesmoke !important; /* Définissez une couleur de texte contrastante */
font-family: 'varino';
font-style: normal;
font-size: 0.8rem;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
white-space: nowrap;
overflow: hidden;
text-overflow: clip; /* Remplacer "ellipsis" par "clip" */
}
.section-icon::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: 50%;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.section-icon:hover::before {
opacity: 1;
}
.section-icon:hover .section-img {
box-shadow: 0 0 5px 3px yellowgreen; /* Ajustez la couleur et la propagation de la lueur selon vos préférences */
transform: scale(1.2); /* Ajoutez un effet de zoom au survol */
}
.section-icon:not(:first-child):hover {
margin-left: 20px; /* Ajoute de l'espace à gauche des icônes non premières lorsqu'elles sont survolées */
margin-right: 20px; /* Réinitialise le margin-right à 0 pour éviter le décalage vers la droite */
}
.section-icon:not(:first-child) {
margin-left: 20px; /* Ajoute de l'espace à gauche des icônes non premières */
}
.section-icon:not(:last-child):hover {
margin-right: 20px; /* Ajoute de l'espace à droite des icônes non dernières lorsqu'elles sont survolées */
}
/* Fin affiche section */@+ Ludo
