Gist fa954043cfef0a0c69112a156ff518c2

100%

Gist fa954043cfef0a0c69112a156ff518c2

✓ Published0🌍 Public

Last edited May 20, 2020

Created on May 20, 2020

This example is a CSS code snippet that addresses a mobile browser viewport bug. The code demonstrates a workaround for iPhones where the CSS `100vh` unit incorrectly calculates the viewport height, failing to account for the browser's bottom menu overlay. The fix is implemented by declaring a `min-height` property twice on the `body` element: first with the standard `100vh` value, and then with the `-webkit-fill-available` value for WebKit-based browsers. Additionally, the `html` element receives a `height` of `-webkit-fill-available` to ensure full-page coverage.

AI-generated description

Similar vizzes

Loading thumbnail…

CSS Media Queries for Desktop, Tablet, Mobile.

This example maps out CSS Media Query breakpoints for desktop, tablet, and mobile screen sizes, using plain CSS within a gist by MistyBlunch. It shows how `@media` rules with `min-width` and `max-width` conditions segment the viewport into device-specific ranges, from high-resolution desktops (1281px and up) down to smartphones (320px to 480px). The code also demonstrates an `orientation: landscape` variant for tablets. No external libraries or data sources appear; it relies solely on native CSS syntax to define responsive behavior at each width threshold.

MMistyBlunch

64% match

Loading thumbnail…

Gist c196418fe72b707e3082568ad77439cc

This example demonstrates a responsive CSS grid system built with Sass, showing how column widths, ordering, visibility, and alignment adapt across five breakpoints (xl, lg, md, sm, xs). The layout defines 12-column proportional widths, auto-sizing columns, and utility classes for hiding, showing, and reordering content. It uses Sass `@each` loops and `@media` queries to generate breakpoint-specific styles, with variables like `$size-xl` and `$grid-spacing` controlling the responsive behavior. The grid container adjusts its max-width based on each breakpoint value.

SSamuelRiversMoore

57% match

Loading thumbnail…

HTML+CSS jotdown notes misc

This example shows a GitHub-style file listing row where not-yet-loaded text is indicated by grey skeleton screen placeholders. Skeleton loading blocks replace commit message and timestamp content using CSS `clip-path` insets and a background gradient with a looping `skeleton-loading` animation. The markup is structured with ARIA roles for grid rows and cells, and an inline SVG octicon folder icon renders the directory indicator. The code demonstrates a pure HTML+CSS technique for improving perceived performance without JavaScript.

GGerHobbelt

56% match

Loading thumbnail…

Gist de30f3fbfcf277da051e

This example demonstrates a text-balancing technique that adjusts the spacing of words within a paragraph to create a visually even, block-like layout. It shows how justified text can be manipulated so that each line fills the container width more uniformly, improving the appearance of dense typographic blocks. The code relies on the jQuery library and a custom `smartresize` event handler to recalculate text wrapping on window resize. It also implements a debouncing function to limit the frequency of resize-triggered updates, ensuring smooth performance during interactive adjustments. The underlying logic inspects the element’s computed text-align property to conditionally apply justification, while preserving the original DOM structure through careful tag and span manipulation.

CCindyJonesHulfachor

55% match

Loading thumbnail…

CSSOM/SVG Test

This example tests how WebKit handles SVG bounding-box measurements by comparing three different API results for a single rectangle. It uses a plain SVG `rect` element with percentage-based dimensions inside an HTML page, then displays the reported sizes from `getBBox()`, `getBoundingClientRect()`, and `getClientRects()[0]` as text rows. The expected dimensions are computed from the viewport and shown alongside, making it easy to spot discrepancies between the SVG specification and CSSOM implementations. The code directly manipulates the DOM with `createElementNS` and relies on native browser geometry methods, with no external libraries.

Mmbostock

54% match

Loading thumbnail…

Gist 4e2713779a93371b2ba61c7cf3c0841b

This example shows a custom stylesheet for the note-taking and knowledge-management app Roam Research, which uses the app’s CSS variables and element selectors to alter the interface’s typography, spacing, and visual hierarchy. It sets the main font to Roboto, then applies the monospaced Fira Code font to headings and page titles, adjusts the weight and letter-spacing of different heading levels, and reduces spacing below the page title. The code also lightens bullets, vertical guides, and sidebar backgrounds, hides the “SHORTCUTS” heading, and truncates breadcrumb text with ellipses, using selectors like `.roam-block-container h1` and `.rm-reference-main button` to target specific components. The styles rely on standard CSS, including pseudo-elements and attribute selectors, and do not use any JavaScript libraries or data APIs.

HHerbCaudill

54% match

Loading thumbnail…

Minimal reponsive javascript framework

This example demonstrates a responsive design framework that switches between mobile, tablet, and desktop states based on the browser window's width. It uses jQuery to listen for window resize events, comparing the document width against breakpoints of 768 and 1100 pixels. The code triggers custom 'MOBILE', 'TABLET', and 'DESKTOP' events on the document, attaching show/hide functions to these states via the jQuery `live` API. A 200-millisecond timer minimizes lag during resizing.

SSimonS

54% match

Loading thumbnail…

Wibbly-wobbly behavior in Chrome (Blink)

A continuously resizing SVG `<image>` element and a yellow rectangle reveal a rendering discrepancy in Chrome’s Blink engine: despite `preserveAspectRatio="xMinYMin"` on both the image and its referenced SVG, the graphic stretches while the rectangle stays fixed. Using d3.v4, the code animates both elements’ widths from 128 to 192 pixels over ten seconds via `transition.attr`. The effect intensifies with browser zoom, highlighting a bug where Blink ignores the image’s aspect-ratio constraint when loading external SVG files.

HHerst

53% match