Finn/talk-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(feat): Adjust button and cards position when screen size change

Browse Source
This commit is contained in:
SeekingGamer
2026-05-14 12:03:42 +08:00
parent c7a205e40c
commit c587df063b
2 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/styles/preview.css
View File

@@ -46,7 +46,7 @@
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
gap: 20px; gap: 12px;
} }
.app-preview__side-phone { .app-preview__side-phone {
@@ -72,7 +72,7 @@
} }
.app-preview__control-wrap { .app-preview__control-wrap {
display: none; display: flex;
align-items: flex-end; align-items: flex-end;
align-self: stretch; align-self: stretch;
flex-shrink: 0; flex-shrink: 0;
@@ -120,7 +120,7 @@
.app-preview__center-phone { .app-preview__center-phone {
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: min(420px, calc(100vw - 144px));
aspect-ratio: 459 / 542; aspect-ratio: 459 / 542;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
@@ -146,6 +146,10 @@
display: flex; display: flex;
} }
.app-preview__carousel {
gap: 20px;
}
.app-preview__side-phone { .app-preview__side-phone {
display: block; display: block;
} }

9
src/styles/sections.css
View File

@@ -291,12 +291,21 @@
.experience__grid { .experience__grid {
grid-template-columns: repeat(2, minmax(0, 320px)); grid-template-columns: repeat(2, minmax(0, 320px));
} }
.experience-card:nth-child(3):last-child {
grid-column: 1 / -1;
justify-self: center;
}
} }
@media (min-width: 920px) { @media (min-width: 920px) {
.experience__grid { .experience__grid {
grid-template-columns: repeat(3, minmax(0, 320px)); grid-template-columns: repeat(3, minmax(0, 320px));
} }
.experience-card:nth-child(3):last-child {
grid-column: auto;
}
} }
@media (min-width: 1023px) { @media (min-width: 1023px) {