diff --git a/css/global.css b/css/global.css index b7210e1..aec8dbc 100644 --- a/css/global.css +++ b/css/global.css @@ -818,11 +818,20 @@ a:hover { /* ========================= - * BASE (1920 DESIGN) + * LOCKED DESIGN FRAME + = *======================== */ +.page-frame { + position: relative; + width: 1920px; + margin: 0 auto; +} + +/* ========================= + * BANNERS INSIDE FRAME (NOT VIEWPORT) = *======================== */ .left_banner, .right_banner { - position: fixed; + position: absolute; width: 383px; height: 626px; @@ -850,46 +859,11 @@ a:hover { } /* ========================= - * SMALL LAPTOPS (1200–1600) + * RESPONSIVE SCALING (SAFE ZOOM ONLY) = *======================== */ -@media (max-width: 1600px) { - .left_banner, - .right_banner { - width: 260px; - height: 425px; - } - - .left_banner { - top: 180px; - left: 10px; - } - - .right_banner { - top: 120px; - right: 10px; - } -} - - -@media (min-width: 2560px) { - - .left_banner { - left: calc(40px + 5vw); - top: 220px; - } - - .right_banner { - right: calc(40px + 5vw); - top: 130px; - } -} - -/* ========================= - * MOBILE - = *======================== */ -@media (max-width: 768px) { - .left_banner, - .right_banner { - display: none !important; +@media (max-width: 1920px) { + .page-frame { + transform: scale(calc(100vw / 1920)); + transform-origin: top center; } }