Snippets Collections
<style>
body {
  margin: 1em auto;
  max-width: 40em;
  width: 88%;
}
  
/* The CSS aspect-ratio property tells browsers to preserve a specific aspect ratio on an element when scaling the size of it up or down. */

iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}
</style>

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/_VDGysJGNoI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Multiplier
CSS custom properties are excellent when it comes to updating multiple elements at once. By injecting a --text-multiplier variable into the text elements' size, you can increase/decrease them all at a specific breakpoint by editing the variable.

// Method 3
h1 {
  font-size: calc(2em * var(--text-multiplier, 1));
}

p {
  font-size: calc(1em * var(--text-multiplier, 1));
}

@media (min-width: 48rem) {
  :root {
    --text-multiplier: 1.25;
  }
}
star

Wed Feb 23 2022 17:58:25 GMT+0000 (UTC) https://gomakethings.com/responsive-iframes-with-the-css-aspect-ratio-property/

#html #css #iframe #responsive
star

Fri Oct 02 2020 02:30:15 GMT+0000 (UTC) https://codyhouse.co/nuggets/responsive-typography

#tipografia #responsive

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension