Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Clamp</title>
<style>
html {
font-size: 20px;
font-weight: 500;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
header > h1 {
font-size: 6rem;
font-size: clamp(5vh, 8rem, 8vw); /* min, val, max */
text-align: center;
}
main {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
gap: 1rem;
}
section {
flex-basis: 40vw;
flex-basis: clamp(20vw, 30vw, 433px);
flex-shrink: 0;
flex-grow: 0;
}
p {
font-weight: 200;
}
</style>
</head>
<body>
<header>
<h1>Using the CSS Clamp Method</h1>
</header>
<main>
<section>
<h2>Sub heading</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae
neque ad, necessitatibus saepe, error molestias reprehenderit ullam
numquam doloribus a nesciunt velit nisi, dolore officiis magnam eum
blanditiis et? Nesciunt?
</p>
</section>
<section>
<h2>Sub heading</h2>
<p>
Accusantium quis saepe nemo odit debitis a enim eaque totam autem,
iure quaerat ea nihil similique voluptatem itaque excepturi
consequuntur voluptatibus vero quae quisquam tempore cumque nulla quo.
Voluptate, quia.
</p>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment