diff --git a/css/global.css b/css/global.css index ffd1b60..87e7d25 100644 --- a/css/global.css +++ b/css/global.css @@ -818,27 +818,46 @@ a:hover { /* ========================= - * DEFAULT (mobile + small screens) - * HIDE completely + * BASE (1920 DESIGN DEFAULT) + * ALWAYS ON (prevents breakage) = *======================== */ .left_banner, .right_banner { - display: none; + position: fixed; + + width: 383px; + height: 626px; + + background-size: contain; + background-position: center; + background-repeat: no-repeat; + + animation: float 6s ease-in-out infinite; + z-index: 94; + pointer-events: none; +} + +/* original images */ +.left_banner { + top: 250px; + left: 40px; + background-image: url("https://www.veltron.net/images/dragon.png"); +} + +.right_banner { + top: 150px; + right: 40px; + background-image: url("https://www.veltron.net/images/digimon.png"); } /* ========================= - * TABLETS / LAPTOPS (between 1280 and 1919) - * → small version + * TABLETS / LAPTOPS (smaller but visible) = *======================== */ -@media (min-width: 1280px) and (max-width: 1919px) { +@media (max-width: 1919px) and (min-width: 1280px) { .left_banner, .right_banner { - display: block; - - width: 160px; - height: 262px; - - opacity: 0.8; + width: 200px; + height: 327px; } .left_banner { @@ -853,26 +872,11 @@ a:hover { } /* ========================= - * DESKTOP 1920×1080 (FULL SIZE) + * SMALL SCREENS (hide safely) = *======================== */ -@media (min-width: 1920px) { +@media (max-width: 1279px) { .left_banner, .right_banner { - display: block; - - width: 383px; - height: 626px; - - opacity: 1; - } - - .left_banner { - top: 250px; - left: 40px; - } - - .right_banner { - top: 150px; - right: 40px; + display: none; } }