f1ca5f9549
* change a follower's name to be very long * Add more media query and make the entire row match the tallest card * fix lint in followerCollection file * make media queries easier to read
51 lines
864 B
SCSS
51 lines
864 B
SCSS
@import '../../../../styles/mixins';
|
|
|
|
.followers {
|
|
width: 100%;
|
|
padding: 5px;
|
|
margin: 0 auto;
|
|
min-height: 20vh;
|
|
|
|
.followerRow {
|
|
display: grid;
|
|
gap: 16px 0;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
grid-auto-rows: min-content;
|
|
}
|
|
|
|
@include screen(mobile) {
|
|
.followerRow {
|
|
display: block;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (640px <= width < 960px) {
|
|
.followerRow {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (960px <= width < 1280px) {
|
|
.followerRow {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (width >= 1280px) {
|
|
.followerRow {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
}
|
|
|
|
.noFollowers {
|
|
padding: var(--content-padding);
|
|
border-radius: var(--theme-rounded-corners);
|
|
width: 100%;
|
|
}
|
|
|
|
.pagination {
|
|
margin: 1rem;
|
|
}
|