add responsive

This commit is contained in:
p2405951
2026-01-14 22:10:38 +01:00
parent d434fd8d25
commit 524846b39c
11 changed files with 523 additions and 270 deletions
@@ -80,7 +80,6 @@
}
}
/* Adaptation pour mobile */
@media screen and (max-width: 760px) {
.eventCard {
min-width: 100%;
@@ -17,25 +17,6 @@
scroll-behavior: smooth;
}
/*.membersContainer::-webkit-scrollbar {
width: 8px;
}
.membersContainer::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.membersContainer::-webkit-scrollbar-thumb {
background: rgba(255, 0, 0, 0.5);
border-radius: 10px;
}
.membersContainer::-webkit-scrollbar-thumb:hover {
background: rgba(125, 249, 30, 0.7);
}*/
.memberCard {
display: flex;
justify-content: space-between;
@@ -54,6 +35,10 @@
.memberCard p {
font-weight: bold;
font-size: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 250px;
}
.buttonGroup {
@@ -71,11 +56,20 @@
.membersContainer {
max-height: 200px;
}
.rightBlock > h2{
font-size:18px;
}
.rightBlock > h2{
font-size: 18px;
}
.memberCard p{
font-size: 15px;
max-width: 150px;
}
}
@media screen and (min-width: 761px) {
.memberCard p{
white-space: normal;
overflow: visible;
text-overflow: clip;
max-width: none;
}
}
@@ -1,23 +1,73 @@
.content {
width: 100%;
padding: 20px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 20px;
}
.modifyIcon {
height: 30px;
width: 30px;
height: 28px;
width: 28px;
}
.section {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 15px;
margin-bottom: 15px;
gap: 12px;
margin-top: 10px;
}
.section h3 {
font-size: 1.1rem;
margin-bottom: 5px;
}
.section h4 {
font-size: 0.95rem;
font-weight: 500;
}
.submitBtn {
align-self: center;
}
width: 100%;
margin-top: 15px;
}
.section button {
width: 100%;
}
@media (min-width: 600px) {
.content {
padding: 24px;
}
.section h3 {
font-size: 1.2rem;
}
.submitBtn {
width: auto;
align-self: center;
min-width: 200px;
}
.section button {
width: fit-content;
}
}
@media (min-width: 900px) {
.content {
padding: 30px;
gap: 30px;
}
.section {
gap: 14px;
}
.modifyIcon {
height: 30px;
width: 30px;
}
}
@@ -149,7 +149,6 @@
width: 100%;
height: auto;
min-height: auto;
margin-bottom: 20px;
}
.chartContainer {
@@ -167,7 +166,6 @@
font-size: 48px;
}
}
/* scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;