Gist 28c56b9a8960e9c0cf99489d2e43881a

100%

Gist 28c56b9a8960e9c0cf99489d2e43881a

✓ Published0🌍 Public

Last edited Apr 5, 2017

Created on Apr 5, 2017

This example shows how to modify the layout of a Blogger template by adjusting the widths of its main content and sidebar containers. The code uses plain CSS to override the default dimensions, expanding the overall page width to 940 pixels and allocating 675 pixels to the main wrapper and 256 pixels to the sidebar. A second file applies more conservative changes, setting the outer wrapper to 760 pixels and the main column to 510 pixels. The gist provides two alternative CSS approaches for resizing a Blogger page structure.

AI-generated description

Similar vizzes

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

61% match

Loading thumbnail…

Gist bb286172022e9e29f5d0fba33df092f6

This example demonstrates a full-width WordPress page layout template, defining a PHP template for posts, pages, categories, and videos. The code sets a template name and restricts its use to specific post types. It uses standard WordPress template hierarchy and conditional logic, with the PHP file structure serving as the primary mechanism. The visualization here is the resulting web page layout, which relies on WordPress’s built-in template system rather than external charting or data libraries.

KKopylovVitalik

57% match

Loading thumbnail…

Remove the annoying blogger preview click trap element.

This example shows a snippet of JavaScript that removes a click-trap overlay from a Blogger preview page, allowing direct interaction with the post. It detects the preview mode by checking for the substring `post-preview` in the URL, then uses `setTimeout` with a three-second delay to locate the `.blogger-clickTrap` element via `document.querySelector` and call `remove()`. The code relies on the standard DOM API and logs status messages to the console, but does not involve any external libraries or data sources.

NN0taN3rd

56% match

Loading thumbnail…

Gist 749f66edf8a547d2508e958f7ec38e50

This example displays a styled list of articles with titles, publication dates, short descriptions, and "Read More" buttons, built using a Nunjucks template that extends a layout file. It shows how to structure a content listing page by iterating through articles sorted by a helper function, pulling metadata like feature images and date formatting. The template integrates Jinja-style logic with `moment` for date display and uses environment helpers to retrieve local assets. The rendering relies on HTML and CSS classes, with no client-side JavaScript libraries involved.

LLucyI

55% match

Loading thumbnail…

Gist 6701427

This visualization is a step-by-step HTML email template demonstrating 12 best practices for coding robust emails that render consistently across major email clients, including Gmail, Yahoo, Outlook, and Lotus Notes. The example uses nested tables, inline styles, and spacer cells to control layout, with explicit width/height attributes on images and `display:block` to prevent rendering quirks. It illustrates techniques such as treating the outer table as the body, avoiding line-height-sensitive tags, using HTML/CSS mixtures for typography, and adding a "no pictures" fallback header. A sample email structure is shown, with a header, grey shadow box, main content area, and footer, all built from table-based layouts with fixed widths and background colors.

FFasani

54% match

Loading thumbnail…

Gist fa954043cfef0a0c69112a156ff518c2

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.

KKopylovVitalik

53% match

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

53% 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

53% match