diff --git a/css/global.css b/css/global.css index 05d6a91..e7b9923 100644 --- a/css/global.css +++ b/css/global.css @@ -823,11 +823,11 @@ a:hover { .right_banner { position: fixed; - /* keep your original placement */ + /* your original positions */ top: 250px; left: 40px; - width: clamp(140px, 18vw, 383px); + width: clamp(180px, 22vw, 383px); height: auto; aspect-ratio: 383 / 626; @@ -841,7 +841,6 @@ a:hover { pointer-events: none; } -/* right stays same logic */ .right_banner { top: 150px; right: 40px; @@ -849,43 +848,29 @@ a:hover { } /* ========================= - * IMPORTANT: prevent UI overlap on laptops/tablets - = *======================== */ -@media (max-width: 1400px) { - .left_banner { - left: 10px; - } - - .right_banner { - right: 10px; - } -} - -/* ========================= - * SAFE ZONE: 1280×720 fix (this is your issue) + * IMPORTANT: ONLY ADJUST SIZE, NOT POSITION + * (this prevents "disappearing") = *======================== */ @media (max-width: 1280px) { .left_banner, .right_banner { - width: 160px; /* forces them OUT of UI */ - opacity: 0.85; - } - - .left_banner { - top: 200px; - } - - .right_banner { - top: 120px; + width: 200px; /* safe reduction */ } } -/* ========================= - * Mobile hide - = *======================== */ +/* tablet */ +@media (max-width: 1100px) { + .left_banner, + .right_banner { + width: 180px; + opacity: 0.85; + } +} + +/* mobile hide (SAFE selector fix) */ @media (max-width: 900px) { - .decor.left_banner, - .decor.right_banner { + .left_banner, + .right_banner { display: none !important; } }