Expands the bonk.io game to the edges of the browser tab.
bonk.io - Full Screen by misspeled-name
Details
Authormisspeled-name
LicenseCreative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)
Categorybonk.io
Created
Updated
Size1.6 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
To truly make the game full screen use this style then press the full screen keyboard shortcut in your browser. (most likely F11)
The background color is easily editable in the css if the default is not to your liking.
There will probably be some blank space either to the sides or above/below the game. This is due to the game being locked at a specific aspect ratio. As long as you don't simultaneously have blank space to the sides AND above/below the style is working properly.
Source code
/* ==UserStyle==
@name bonk.io - Full Screen
@namespace Misspeled Name (https://userstyles.world/user/misspeled-name)
@version 1.0.1
@description Expands the bonk.io game to the edges of the browser tab.
@author Misspeled Name (https://userstyles.world/user/misspeled-name)
@license Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)
==/UserStyle== */
@-moz-document domain("bonk.io") {
/* stuff above game */
[id="bonkioheader"]
/* stuff to left of game */
, [id="adboxverticalleftCurse"]
/* stuff to right of game */
, [id="adboxverticalCurse"]
/* stuff below game */
, [id="descriptioncontainer"]
{
display:none !important;
}
body
{
/* change background color here rather than pagecontainer in case the latter is important for the game */
background-color: #222222 !important;
/* needed for vertical centering */
display: flex !important;
}
/* get rid of some borders and scrollbars
center things too */
body
, iframe
, [id="maingameframe"]
, [id="pagecontainer"]
, [id="bonkiocontainer"]
{
margin: auto !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
/* stretch game to largest possible dimensions
the game is coded to run at a specific aspect ratio */
[id="pagecontainer"]
, [id="bonkiocontainer"]
{
max-width: calc(100vh * 1.46) !important;
max-height: calc(100vw / 1.46) !important;
width: 100% !important;
height: 100% !important;
}
}