scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix scandic friends block for tablet view

Browse Source
This commit is contained in:
Christian Andolf
2025-02-18 16:44:54 +01:00
parent 0d6bbf7b78
commit 9b88b9d1da
2 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Blocks/JoinScandicFriends/index.tsx
View File

@@ -38,7 +38,7 @@ export default async function JoinScandicFriends({
height={384} height={384}
/> />
) : ( ) : (
<SurpriseIcon width={384} height={384} /> <SurpriseIcon width="100%" height="100%" />
)} )}
</div> </div>
<div className={styles.content}> <div className={styles.content}>

21
components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
View File

@@ -6,7 +6,7 @@
gap: var(--Spacing-x5); gap: var(--Spacing-x5);
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 900px) {
.container { .container {
padding: 0 var(--Spacing-x4) 0 0; padding: 0 var(--Spacing-x4) 0 0;
} }
@@ -16,9 +16,9 @@
display: none; display: none;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 900px) {
.iconContainer { .iconContainer {
width: 384px; flex: 0 1 384;
display: flex; /* gets rid of whitespace */ display: flex; /* gets rid of whitespace */
} }
} }
@@ -28,6 +28,7 @@
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x3); gap: var(--Spacing-x3);
padding: var(--Spacing-x3) 0; padding: var(--Spacing-x3) 0;
flex: 1;
} }
.textContent { .textContent {
@@ -56,6 +57,20 @@
} }
} }
@media screen and (min-width: 900px) {
.usp {
grid-template-rows: repeat(5, auto);
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1024px) {
.usp {
grid-template-rows: repeat(3, auto);
grid-template-columns: repeat(3, 1fr);
}
}
.usp li { .usp li {
display: flex; display: flex;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);