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

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

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