status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-01-21 00:40:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(overview): use flex to make cards more responsive

Browse Source
This commit is contained in:
RadoslavDimchev 2024-02-14 12:04:53 +02:00 committed by Radoslav Dimchev
parent 16a99e1ef7
commit 401f6c5f1b
1 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/ValidatorOnboarding/Overview/overviewLayout.module.css
View File

@ -1,6 +1,6 @@
.overview-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
display: flex;
flex-wrap: wrap;
gap: 16px;
width: 258%;
}
@ -10,22 +10,26 @@
border: 1px solid rgba(0, 0, 0, 0.15);
padding: 10px 12px;
background-color: #fff;
}
@media screen and (max-width: 1300px) {
.overview-cards {
grid-template-columns: repeat(2, 1fr);
}
min-width: 21%;
flex: 1;
}
@media screen and (max-width: 1000px) {
}
.overview-cards {
width: 100%;
}
}
@media screen and (max-width: 515px) {
.overview-cards {
grid-template-columns: 1fr;
@media screen and (max-width: 775px) {
.overview-card {
min-width: 30%;
}
}
@media screen and (max-width: 545px) {
.overview-card {
min-width: 50%;
}
}