mskurotsuchi Posted January 23, 2019 Share Posted January 23, 2019 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%; } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now