Jump to content

Responsive Scaling Issue


mskurotsuchi

Recommended Posts

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...