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}
/>
) : (
<SurpriseIcon width={384} height={384} />
<SurpriseIcon width="100%" height="100%" />
)}
</div>
<div className={styles.content}>

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

@@ -6,7 +6,7 @@
gap: var(--Spacing-x5);
}
@media screen and (min-width: 768px) {
@media screen and (min-width: 900px) {
.container {
padding: 0 var(--Spacing-x4) 0 0;
}
@@ -16,9 +16,9 @@
display: none;
}
@media screen and (min-width: 768px) {
@media screen and (min-width: 900px) {
.iconContainer {
width: 384px;
flex: 0 1 384;
display: flex; /* gets rid of whitespace */
}
}
@@ -28,6 +28,7 @@
flex-direction: column;
gap: var(--Spacing-x3);
padding: var(--Spacing-x3) 0;
flex: 1;
}
.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 {
display: flex;
gap: var(--Spacing-x1);