Skip to content

Instantly share code, notes, and snippets.

@profstein
Created December 11, 2019 09:12
Show Gist options
  • Save profstein/ff67cb749716f2d6a5d95c98350930cb to your computer and use it in GitHub Desktop.
Save profstein/ff67cb749716f2d6a5d95c98350930cb to your computer and use it in GitHub Desktop.
Base CSS to get ready for responsive layout
/* ==================================
Responsive Styling and Layout
================================== */
/* ================= Use Border Box model ================= */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* ================= Basic Responsive Images and Video ================= */
img,video{
width: auto;
height: auto;
max-width: 100%;
}
/* ================= Responsive Embedded Video ================= */
/* to use this add a div with class videoWrapper around the iframe markup copied from YouTube or Vimeo. Then also add a ratio-16-9 (most common) or ratio-4-3 class to the wrapper depending on the aspect ratio of your video */
/* More info here: https://codepen.io/profstein/pen/mArLRj */
.videoWrapper {
position: relative;
padding-top: 25px;
height: 0;
clear:both;
outline:1px solid red;
}
.videoWrapper.ratio-16-9{
padding-bottom: 56.25%; /* 16:9 */
}
.videoWrapper.ratio-4-3{
padding-bottom: 75%; /* 4:3 */
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ================= LAYOUT and MEDIA QUERIES ================= */
/* Add your CSS for the layout and media queries here */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment