amiirkhl/my-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resize and rearrange hero landing illustrations for tablet and mobile screens

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-06 12:14:47 +03:30
parent ad51d97567
commit 9c3820866d
2 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/HeroSection.module.css
View File

@@ -224,10 +224,17 @@
TABLET 501px – 1100px — match the illustration breakpoint TABLET 501px – 1100px — match the illustration breakpoint
================================================================ */ ================================================================ */
@media (max-width: 1100px) and (min-width: 501px) { @media (max-width: 1100px) and (min-width: 501px) {
.heroContentWrapper {
height: auto;
min-height: clamp(540px, 64vw, 640px);
}
.heroContent { .heroContent {
/* Top-anchor content so it sits nicely in the upper-center zone */ height: auto;
min-height: clamp(540px, 64vw, 640px);
justify-content: flex-start; justify-content: flex-start;
padding-top: clamp(60px, 8vw, 90px); padding-top: clamp(60px, 8vw, 90px);
padding-bottom: 40px;
} }
.heroTitle { .heroTitle {
@@ -253,7 +260,7 @@
@media (max-width: 500px) { @media (max-width: 500px) {
.heroContentWrapper { .heroContentWrapper {
height: auto; height: auto;
min-height: 520px; min-height: 540px;
} }
.topBar { .topBar {
@@ -267,8 +274,8 @@
.heroContent { .heroContent {
height: auto; height: auto;
min-height: 520px; min-height: 540px;
padding: 66px 16px 36px; padding: 66px 16px 40px;
justify-content: flex-start; justify-content: flex-start;
} }

12
src/components/ScenicHeroJourney.module.css
View File

@@ -20,7 +20,8 @@
.heroStage { .heroStage {
position: relative; position: relative;
width: 100%; width: 100%;
height: clamp(360px, 46vw, 680px); height: auto;
min-height: clamp(520px, 46vw, 680px);
overflow: hidden; overflow: hidden;
background: var(--bg-page); background: var(--bg-page);
} }
@@ -76,7 +77,8 @@
================================================================ */ ================================================================ */
@media (max-width: 1100px) and (min-width: 501px) { @media (max-width: 1100px) and (min-width: 501px) {
.heroStage { .heroStage {
height: clamp(360px, 52vw, 480px); height: auto;
min-height: clamp(540px, 64vw, 640px);
} }
/* Left — visible slice ≈ width - 150px, always < content padding */ /* Left — visible slice ≈ width - 150px, always < content padding */
@@ -111,20 +113,20 @@
@media (max-width: 500px) { @media (max-width: 500px) {
.heroStage { .heroStage {
height: auto; height: auto;
min-height: 520px; min-height: 540px;
} }
.backdropLeft { .backdropLeft {
top: clamp(75px, 16vw, 95px); top: clamp(75px, 16vw, 95px);
bottom: auto; bottom: auto;
left: clamp(-100px, calc(20vw - 230px), -100px); left: clamp(-140px, calc(20vw - 230px), -100px);
width: clamp(200px, 44vw, 250px); width: clamp(200px, 44vw, 250px);
} }
.backdropRight { .backdropRight {
top: clamp(82px, 18vw, 102px); top: clamp(82px, 18vw, 102px);
bottom: auto; bottom: auto;
right: clamp(-120px, calc(20vw - 240px), -120px); right: clamp(-150px, calc(20vw - 240px), -120px);
width: clamp(210px, 46vw, 260px); width: clamp(210px, 46vw, 260px);
} }