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

fix: update mobile breakpoint threshold to 650px

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-06 12:47:00 +03:30
parent c997acb0e0
commit 7c7604299c
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -230,9 +230,9 @@
MOBILE ≤ 640px MOBILE ≤ 640px
================================================================ */ ================================================================ */
/* ================================================================ /* ================================================================
TABLET 501px – 1100px — match the illustration breakpoint TABLET 651px – 1100px — match the illustration breakpoint
================================================================ */ ================================================================ */
@media (max-width: 1100px) and (min-width: 501px) { @media (max-width: 1100px) and (min-width: 651px) {
.heroContentWrapper { .heroContentWrapper {
height: auto; height: auto;
min-height: clamp(540px, 64vw, 640px); min-height: clamp(540px, 64vw, 640px);
@@ -266,9 +266,9 @@
} }
/* ================================================================ /* ================================================================
MOBILE ≤ 500px (screensizes under 500px) MOBILE ≤ 650px (screensizes under 650px)
================================================================ */ ================================================================ */
@media (max-width: 500px) { @media (max-width: 650px) {
.heroContentWrapper { .heroContentWrapper {
height: auto; height: auto;
min-height: 540px; min-height: 540px;

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

@@ -113,11 +113,11 @@
} }
/* ================================================================ /* ================================================================
TABLET 501px – 1100px TABLET 651px – 1100px
Large illustrations with heavy bleed — bold fragments at edges. Large illustrations with heavy bleed — bold fragments at edges.
Width scales fluidly; fixed bleed offset keeps content clear. Width scales fluidly; fixed bleed offset keeps content clear.
================================================================ */ ================================================================ */
@media (max-width: 1100px) and (min-width: 501px) { @media (max-width: 1100px) and (min-width: 651px) {
.heroStage { .heroStage {
height: auto; height: auto;
min-height: clamp(540px, 64vw, 640px); min-height: clamp(540px, 64vw, 640px);
@@ -147,13 +147,13 @@
} }
/* ================================================================ /* ================================================================
MOBILE ≤ 500px (screensizes under 500px) MOBILE ≤ 650px (screensizes under 650px)
Assets moved UP to the sides (matching desktop/tablet aesthetic): Assets moved UP to the sides (matching desktop/tablet aesthetic):
- Anchored via top, flanking the avatar & title - Anchored via top, flanking the avatar & title
- Fluid side bleed maintains balance between visibility & clearance - Fluid side bleed maintains balance between visibility & clearance
- Zero collision with central avatar, title, buttons, or contact bar - Zero collision with central avatar, title, buttons, or contact bar
================================================================ */ ================================================================ */
@media (max-width: 500px) { @media (max-width: 650px) {
.heroStage { .heroStage {
height: auto; height: auto;
min-height: 540px; min-height: 540px;