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
================================================================ */
/* ================================================================
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 {
height: auto;
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 {
height: auto;
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.
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 {
height: auto;
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):
- Anchored via top, flanking the avatar & title
- Fluid side bleed maintains balance between visibility & clearance
- Zero collision with central avatar, title, buttons, or contact bar
================================================================ */
@media (max-width: 500px) {
@media (max-width: 650px) {
.heroStage {
height: auto;
min-height: 540px;