diff --git a/css/global.css b/css/global.css index e7b9923..8cf3c9d 100644 --- a/css/global.css +++ b/css/global.css @@ -819,58 +819,63 @@ a:hover { + +/* ========================= + * DEFAULT (mobile + small screens) + * HIDE completely + = *======================== */ .left_banner, .right_banner { - position: fixed; - - /* your original positions */ - top: 250px; - left: 40px; - - width: clamp(180px, 22vw, 383px); - height: auto; - aspect-ratio: 383 / 626; - - background-size: contain; - background-position: center; - background-repeat: no-repeat; - - animation: float 6s ease-in-out infinite; - z-index: 94; - - pointer-events: none; -} - -.right_banner { - top: 150px; - right: 40px; - left: auto; + display: none; } /* ========================= - * IMPORTANT: ONLY ADJUST SIZE, NOT POSITION - * (this prevents "disappearing") + * TABLETS / LAPTOPS (between 1280 and 1919) + * → small version = *======================== */ -@media (max-width: 1280px) { +@media (min-width: 1280px) and (max-width: 1919px) { .left_banner, .right_banner { - width: 200px; /* safe reduction */ + display: block; + + width: 160px; + height: 262px; + + opacity: 0.8; + } + + .left_banner { + top: 180px; + left: 10px; + } + + .right_banner { + top: 120px; + right: 10px; } } -/* tablet */ -@media (max-width: 1100px) { +/* ========================= + * DESKTOP 1920×1080 (FULL SIZE) + = *======================== */ +@media (min-width: 1920px) { .left_banner, .right_banner { - width: 180px; - opacity: 0.85; - } -} + display: block; + + width: 383px; + height: 626px; + + opacity: 1; + } + + .left_banner { + top: 250px; + left: 40px; + } -/* mobile hide (SAFE selector fix) */ -@media (max-width: 900px) { - .left_banner, .right_banner { - display: none !important; + top: 150px; + right: 40px; } }