Skip to content

Instantly share code, notes, and snippets.

@osvik

osvik/dynamic.html

Created March 25, 2019 20:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save osvik/bf1682b7c72baec3a4ece37b79dcb92e to your computer and use it in GitHub Desktop.
Save osvik/bf1682b7c72baec3a4ece37b79dcb92e to your computer and use it in GitHub Desktop.
Download ZIP
Responsive elements based on parent column width
Raw
dynamic.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Responsive elements based on parent column width</title>
</head>
<body>
<h1>Responsive elements based on column width</h1>
<!-- START FLEXIBLE CONTAINER -->
<style>
.f0t434 {
font-size: 14px;
}
.f435t619 {
font-size: 20px;
}
.f620t877 {
font-size: 30px;
}
.f878tmax {
font-size: 42px;
}
</style>
<div id="flexibleContainer">
This is a test
</div>
<script>
/**
* Adds a class accordingly to colum width
*/
document.addEventListener("DOMContentLoaded", function(t) {
var containerEl = document.getElementById("flexibleContainer");
var elwidth = containerEl.offsetWidth;
if (elwidth < 435) {
containerEl.classList.add("f0t434");
} else if (elwidth >= 435 && elwidth < 620) {
containerEl.classList.add("f435t619");
} else if (elwidth >= 620 && elwidth < 878) {
containerEl.classList.add("f620t877");
} else if (elwidth >= 878) {
containerEl.classList.add("f878tmax");
}
});
</script>
<!-- END FLEXIBLE CONTAINER -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment