Skip to content
Laviyx Learn

Try

Responsive CSS and Effects Practice

Practise media queries, fluid sizes, custom properties, transitions and animations by styling given HTML. Each solution is rendered live; resize your browser window to test the responsive ones.

Intermediate6 problemsUpdated

Review first: Responsive Design, Media Queries, calc, min, max and clamp, Custom Properties (Variables), Transitions, Keyframe Animations

  1. 1.Mobile-first columns

    Intermediate

    Write mobile-first CSS so the three boxes stack in one column by default, and sit in three equal columns when the viewport is at least 500px wide.

    HTML to style (HTML)
    <div class="cols">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>
    Show hint

    Base styles with display: grid and a gap; add grid-template-columns inside @media (min-width: 500px).

    Show solution
    CSS
    .cols {
  display: grid;
  gap: 10px;
}
.cols > div {
  padding: 16px;
  background: #eef3ff;
}
@media (min-width: 500px) {
  .cols {
    grid-template-columns: repeat(3, 1fr);
  }
}
    Result

    Inside the result frame, the viewport is the frame itself, so the layout follows the width of the lesson column.

  2. 2.A fluid heading

    Intermediate

    Make the heading's font size scale with the viewport width, but never smaller than 1.5rem or larger than 2.75rem, in a way that still responds to browser zoom.

    HTML to style (HTML)
    <h1 class="hero">Learn to build for the web</h1>
    Show hint

    clamp(min, preferred, max), with a preferred value that combines vw and rem.

    Show solution
    CSS
    .hero {
  font-size: clamp(1.5rem, 4vw + 0.5rem, 2.75rem);
  line-height: 1.2;
}
    Result

  3. 3.Themes with custom properties

    Intermediate

    Use custom properties --bg, --text and --accent for the panel's background, text colour and button colour. Define light values on .panel and dark values on .panel.dark, so the two panels look different with the same rules.

    HTML to style (HTML)
    <div class="panel"><p>Light panel</p><button>Action</button></div>
<div class="panel dark"><p>Dark panel</p><button>Action</button></div>
    Show hint

    Set the variables on .panel, override them on .panel.dark, and read them with var() in the shared rules.

    Show solution
    CSS
    .panel {
  --bg: #ffffff;
  --text: #1f2328;
  --accent: #2f5fe0;
  background: var(--bg);
  color: var(--text);
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
.panel.dark {
  --bg: #0d1117;
  --text: #e6edf3;
  --accent: #6d95ff;
}
.panel button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
}
    Result

  4. 4.A smooth hover lift

    Beginner

    Make the card move up by 4px and get a stronger shadow when hovered, animating smoothly over 0.2 seconds. Use properties that animate efficiently.

    HTML to style (HTML)
    <div class="card">Hover over me</div>
    Show hint

    Transition transform and box-shadow; use translateY(-4px) on hover.

    Show solution
    CSS
    .card {
  display: inline-block;
  padding: 20px 28px;
  margin: 10px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.18);
}
    Result

  5. 5.A loading spinner

    Intermediate

    Turn the empty div into a 32px circular spinner with a light grey border and a blue top border, rotating once every 0.8 seconds forever at constant speed. Stop the animation for users who prefer reduced motion.

    HTML to style (HTML)
    <div class="spinner" role="status" aria-label="Loading"></div>
    Show hint

    @keyframes spin { to { transform: rotate(360deg); } }, animation: spin 0.8s linear infinite, and a prefers-reduced-motion media query.

    Show solution
    CSS
    @keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #e9ecef;
  border-top-color: #2f5fe0;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}
    Result

  6. 6.Truncate long titles

    Beginner

    Keep each course title on one line inside the 220px wide box, cutting off long titles with an ellipsis.

    HTML to style (HTML)
    <ul class="titles">
  <li>HTML</li>
  <li>A very long course title about responsive web design and layout</li>
</ul>
    Show hint

    white-space: nowrap, overflow: hidden and text-overflow: ellipsis on each item.

    Show solution
    CSS
    .titles {
  width: 220px;
  padding-left: 18px;
  border: 1px solid #ddd;
}
.titles li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
    Result
← All practice setsLearn CSS course →