Skip to content

Instantly share code, notes, and snippets.

@kontur
Created April 10, 2020 07:59
Show Gist options
  • Save kontur/03057c8c90f7fd21d220abbb00363083 to your computer and use it in GitHub Desktop.
Save kontur/03057c8c90f7fd21d220abbb00363083 to your computer and use it in GitHub Desktop.
Magic Carpet... aka positioning a 100% wide element inside the layout flow
.magic-carpet {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
// fixed height
height: 250px;
// height percent of screen
height: 50vh;
// height based on aspect ratio
height: 0;
padding-bottom: 50% // 2:1, e.g. 100% (width) / 50% (of width as height)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment