Full Width Toggle

WHAT IT DOES

Full Width Toggle is a browser extension that removes side margins, padding, and width constraints from the main content area of any webpage, making it truly full-width. The tool automatically detects the main content container (using common selectors like main, article, .content, etc.) or allows you to manually detect and select the container. A simple toggle enables or disables full-width mode, and the setting is saved per website. The tool is ideal for users who want to maximize screen real estate on websites with excessive side margins, fixed-width layouts, or restrictive padding.

WHERE IT RUNS

Full Width Toggle runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, injecting CSS to override container widths and margins. It works on any page, whether static or dynamic, with no external dependencies. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable full-width mode. Click the "Detect Container" button to automatically find the main content container and apply full-width to it. The detected container selector is displayed in the panel. Click "Auto-Detect" to revert to automatic detection. Click the "Reapply" button to reapply the full-width styles if they were removed by page changes. The mode is saved per website, so your preference persists across visits. The tool works best on pages with a single main content area.

REAL MECHANISM — WHY THIS WORKS

Most full-width tools rely on modifying the body element or using a simple max-width override, which may not affect all content containers. Full Width Toggle uses a comprehensive container detection and CSS injection approach. The tool attempts to find the main content container by checking common selectors (main, article, .content, .main-content, .post-content, etc.) and falling back to the largest text-containing element on the page. Once the container is identified, the tool injects a style element with !important rules that set max-width: 100%, width: 100%, padding-left: 0, padding-right: 0, margin-left: 0, and margin-right: 0 on the container and its immediate children. This effectively removes all side constraints and makes the content span the full viewport width. The container selector can be manually detected or auto-detected, and the setting is stored in GM_setValue for persistence. The toggle simply enables or disables the injected styles, providing a simple on/off control. This approach ensures consistent, reliable, and fully private full-width control without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view controls. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position, enabled state, and container selector—are saved per domain for a seamless experience.

PLEASE NOTE

Full Width Toggle requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool applies CSS !important rules, which may conflict with page styles that also use !important. The container detection is based on common patterns and may not work perfectly on all websites. If the tool does not detect the correct container, use the "Detect Container" button to manually select it. The tool may affect other elements if the container detection is inaccurate. All settings are stored locally in your browser using GM_setValue. No page content, width data, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only modifies CSS at your request.