Modern MTG Cards Frame Visual Refresh & Mobile Scroll Fixes

2026-06-07 | 4 min read

Modern MTG Cards Frame Visual Refresh & Mobile Scroll Fixes

We are thrilled to roll out a major visual and responsive design overhaul! If you've been browsing our site on a phone or tablet, you may have noticed a frustrating bug: the screen could scroll horizontally, creating an awkward side-swipe feeling that disrupted navigation.

We have not only squashed this mobile scroll bug once and for all, but we also used it as an opportunity to inject premium, immersive Magic: The Gathering (MTG) aesthetics into the core layout. The site now looks and feels like a showcase MTG card collection, down to holographic security stamps, foil sheen reflections, and dynamic mana-themed particle embers!

1. Squashing the Mobile Side-Scroll Bug

The Problem: Rigid Grid minmax Bounds

The horizontal scrolling issue was primarily caused by layout containers or card grids using rigid minimum sizes in CSS grid templates (e.g., repeat(auto-fill, minmax(250px, 1fr))). When combined with parent padding, margins, and sidebars, these columns refused to shrink below 250px, pushing layout containers beyond the edge of mobile viewports.

Furthermore, standard attempts to fix this using overflow-x: hidden on high-level wrappers often broke position: sticky headers or filters, since standard overflow rules modify how the browser computes sticky bounding boxes.

The Solution: CSS Grid Clamping & overflow-x: clip

To resolve this, we implemented two critical changes:

  1. Fluid Grid Columns: We updated all grid definitions across the site (homepage, search results, deck builder, precon upgrades, and commander staples) to clamp their minimum column widths using CSS min():

    /* Before */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

/* After */
grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));

    This ensures that if a mobile viewport is smaller than 250px, the grid columns compress fluidly without leaking layout containers out of bounds.

  2. Non-destructive Scroll Locking: We locked horizontal overflow on html, body.tc-body, and the main .tc-shell wrapper using overflow-x: clip:

    html,
body.tc-body,
.tc-shell {
  max-width: 100%;
  overflow-x: clip;
}

    Unlike overflow-x: hidden, overflow-x: clip prevents horizontal scrolling while preserving sticky positioning context, keeping our search bars and collection trays sticky!

2. Immersive MTG Visual Upgrades

To make the site feel premium and novel to MTG players, we designed and integrated several features that match the themes of physical Magic cards.

Dynamic WUBRG Mana Embers

We upgraded our floating background particle effect to generate random embers themed around Magic’s iconic WUBRG color wheel:

  • ☀️ White (Pearl/Cream): #fdfaf2
  • 💧 Blue (Island): #3b82f6
  • 💀 Black (Swamp): #a78bfa
  • 🔥 Red (Mountain): #ef4444
  • 🌳 Green (Forest): #10b981
  • 🌟 Gold/Colorless: #fbbf24

These colors glow softly using CSS box-shadow layers and slowly drift upward. The particle system automatically respects prefers-reduced-motion settings, disabling movement dynamically if the user has motion sensitivities enabled.

Rare Holographic Security Stamp

In Magic 2015, Wizards of the Coast introduced an oval holographic stamp at the bottom of Rare and Mythic Rare card frames to signify authenticity.

We brought this exact seal to our site layout! Located at the bottom of the main content container, a shimmering, color-shifting oval security stamp (.tc-holo-stamp) glows at the center bottom border.

  • It houses a high-fidelity ✧ (Star/Planeswalker symbol).
  • It cycles through a smooth color spectrum using CSS gradient animation.
  • When hovered, it scales slightly, shifts shadow intensity, and glimmers brighter.
.tc-holo-stamp {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff007f, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #7f00ff, #ff007f);
  background-size: 300% 300%;
  border: 1px solid rgba(255, 255, 255, 0.85);
  animation: tc-foil-shimmer 6s linear infinite;
}

Foil Showcase Pinstripe Borders

The outer container of our layout (.tc-main__inner) now features a double pinstripe inset shadow border, replicating the premium showcase frames found in modern Collector Boosters. This adds depth and frames the deck tools and checklists beautifully.

Rainbow Foil Sheen Hover Sweep

When you hover over cards, scanner matches, checklist items, and posts, a diagonal rainbow linear-gradient sweeps across the card surface.

  • Powered by mix-blend-mode: color-dodge, it behaves exactly like a cold-foil card catching the light!
  • The sheen animates smoothly from bottom-left to top-right on hover.
  • It matches card layouts in grid, list, and detail views.

Try the Refreshed Interface

These updates are live across all major pages, including:

  • Card Search Results: Hover over cards in Grid or List view to see the foil shine.
  • Scanner Matches: Check out matches on the /scan dashboard.
  • Upgrade Planner & Staples: Browse precon upgrade recommendations and commander checklists on mobile without any side-scroll!

We hope you enjoy these visual details! Let us know how the new look feels when scanning your collection or mapping out your next deck list.

Card data and image visuals are copyright Wizards of the Coast and Scryfall. Pricing is retrieved securely from TCGplayer (with affiliate partner tracking).

Related Posts