mskurotsuchi

Hello, I need help from someone who's great with css / html to take a look at this website and code, and help me figure out a way to solve the reverse responsive move. The site looks exactly the way I want it to look, but then when you start scaling the browser, the responsive move starts going down at where the poster is and this huge top margin appears. How can I fix that? So all the elements are fixed on top and keep their positions even though scaling down. Thank you, The website: https://mit-wspt.persona.co you need to login with "mit-wspt" for both name and password. Here's the code: /** * Resets */ ::-moz-selection { background-color: #09f; color: #fff; } ::selection { background-color: #09f; color: #fff; } :focus { outline: 0; } customhtml > * { position: relative; } /** * Global */ body, html { min-height: 100%; max-height: initial; min-width: 50%; margin: 0px; padding: 0px; overflow: auto; top: 0; left: 0; display: flex; /* or inline-flex */ flex-wrap: nowrap; } html { position: relative; } body { background: #ffff; } a:active { opacity: 0.7; } /** * Backdrop */ #backdrop { position: absolute; max-height: 100vh; height: 100vh; left: 0; right: auto; top: auto; height: 1082px; max-width: 50%; } #background_splash { right: auto; top: auto; position: fixed; } /** * Container */ main { background: #fff; clear: both; overflow: visible; position: absolute; max-width: 100%; width: 100%; height: 0; } main > div { width: 100%; } .subpage_overlay { display: block; pointer-events: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; } body.homepage .subpage_overlay { display: none; } /** * Content */ i, em { font-style: italic; } b, strong { font-weight: bold; } ul, ol { margin: 0; padding: 0 0 0 1em; } sup { top: -0.4em; vertical-align: baseline; position: relative; } sub { top: 0.3em; vertical-align: baseline; position: relative; } s { } .slideshow-nav { margin-bottom: 0.5em; } img { border: 0; max-height: calc(100% + 50%); padding: 0; margin: 0; width: 100vh; height: 100vh; right: auto; top: auto; overflow: auto; position: absolute; } blockquote { margin: 0; padding: 0 0 0 2em; } hr { background: rgba(127, 127, 127, 0.2); border: 0; height: 0.08em; display: block; } .bodycopy { display: none; } .container { min-height: 100%; padding: 0; } .content img { float: none; margin-bottom: 1em; } .clear:after { content: ""; display: table; clear: both; } .loading[data-loading] { display: none; position: fixed; top: 8px; left: 8px; z-index: 100; } /** * Editor styles */ [data-css-presets="true"] main { background-color: rgb(255, 255, 255)/*!content_right*/; text-align: left /*!text_left*/; min-height: 100vh /*!content_stretch*/; right: 0 /*!content_right*/; overflow: visible; } [data-css-presets="true"] .content_padded { padding: 2rem/*!main_margin*/; overflow: auto; } [data-css-presets="true"] .content_width { width: 47%/*!content_right*/; overflow: auto; } [data-css-presets="true"] #backdrop { width: 100vh/*!right_fit*/; left: 0; max-height: calc(100% + 50%); min-height: calc(100% + 50%); /*!content_stretch*/; right: auto; top: auto; margin: 0; overflow: scroll; padding: 0; } [data-predefined-style="true"] main { font-size: 1.4rem; font-weight: 400; color: rgba(0, 0, 0, 0.91); font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Roman", Social /*!System*/; font-style: normal; line-height: 1.3; } [data-predefined-style="true"] main a { color: rgba(0, 0, 0, 0.65); padding-bottom: 0em; border-bottom: 0.08em solid rgba(127, 127, 127, 0.2); text-decoration: none; } [data-predefined-style="true"] main a:hover { } main a.image-link, main a.icon-link, main a.image-link:hover, main a.icon-link:hover { border-bottom: 0; padding-bottom: 0; } [data-predefined-style="true"] h1 { font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Bold", Social /*!System*/; font-style: normal; font-weight: 700; padding: 0; margin: 0; font-size: 4.4rem; line-height: 1.2; color: rgba(0, 0, 0, 1); text-rendering: optimizeLegibility; } [data-predefined-style="true"] h1 a { color: rgba(0, 0, 0, 0.85); } [data-predefined-style="true"] h2 { font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Bold", Social /*!System*/; font-style: normal; font-weight: 700; padding: 0; margin: 0; color: rgba(0, 0, 0, 0.95); font-size: 1.3rem; line-height: 1.4; text-rendering: optimizeLegibility; } [data-predefined-style="true"] h2 a { color: rgba(0, 0, 0, 0.85); } [data-predefined-style="true"] small { display: inline-block; font-size: 1.2rem; line-height: 1.2; font-family: Marat, Social /*!Persona*/; font-style: normal; font-weight: 400; color: rgba(0, 0, 0, 0.8); } [data-predefined-style="true"] small a { color: rgba(0, 0, 0, 0.65); border-bottom-width: 0.1em; } [data-css-presets="true"] .subpage_overlay { background-color: #fff/*!subpage_overlay*/; } /** * Backstage Icon */ #backstage_icon { display: block; } /** * Breakpoints */ [data-css-presets="true"].mobile #plugin, [data-css-presets="true"].mobile #backdrop, .mobile #backdrop, .mobile #plugin { position: relative; height: 50vh; min-width: 100%; width: calc(100% - 80rem) /*!right_fit*/; top: 0; bottom: auto; left: 0 /*!right_fit*/; } .mobile main, [data-css-presets="true"].mobile main { position: relative; min-height: 10px; max-width: 100%; width: 100%; } .mobile main.content_width, [data-css-presets="true"].mobile main.content_width { max-width: 100%; width: 100%; }