User avatar

Flaky Responsive Breakpoint PRO

An unnamed playground on Frontend.fyi

Unlock Playground Access

Playgrounds let you build, test, and share frontend ideas instantly — right in your browser. Access is included in PRO. Just want Playgrounds? Pick a plan below.

Maker

€5,- / month

Unlimited Playgrounds access to build, experiment, and share without limits.

Join for €5 per month

Champion

€10,- / month

All the benefits of Maker, plus you help Frontend.fyi grow and get a Champion badge on your profile.

Join for €10 per month

Cancel anytime — no commitment.
Upgrade to PRO anytime and get a partial refund.We'll credit 100% of your first 3 months and 50% of the rest toward the PRO lifetime price.

Already a member? Login

Playground settings

Title

Description

Public

Editor settings


Packages

These packages can be imported in your JavaScript files.

Package name

Version

1234567891011121314151617181920212223242526272829303132333435363738394041
:root {
  --background-color: #131018;
  --text-color: #fff;

  background-color: var(--background-color);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.wrapper {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  color: var(--text-color);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  margin-bottom: 1rem;
  height: 3rem;
  width: 3rem;
}

.title {
  margin-bottom: 1rem;
  max-width: 60%;
  text-align: center;
  font-size: 2rem;
  text-wrap: balance;
}

.cta {
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--text-color);
}
One sec — editor's thinking…