Skip to content

Tumblr - Mobile Tweaks by wac







Size5.9 kB


Learn how we calculate statistics in the FAQ.

Failed to fetch stats.


Tweaks for Tumblr intended for narrow screens


If you want to contact me about bugs or anything, my tumblr is but you can try deeby if my asks are closed.


  • New: Scale font and adjust toggle height on blog settings menu ("Edit Appearance")
  • New: "Unblock" button now goes below blog name if URL is long enough, instead of overflowing from the screen
  • Removes the "Get The App" banner from the Dashboard and most (if not all) Tumblr blogs.
  • Removes paragraphs from the "Everything Okay?" screen, to make the button clickable and not obscured.
  • Makes the new Tumblr Notes box only as tall as the amount of notes it is displaying. No more weird blank space.
  • Makes emojis in the Replies/Reblogs the same size as all other text.

Removed features, can enable them in the code by changing to

  • Repositions the Quick Reblogs box from XKit Rewritten.
  • Keyboard offset to keep my keyboard from covering the tags field. Offset height is stored in a CSS variable so anyone can modify it.
    Update July 19 2022: I finally figured out UserStyle variables, so the keyboard offset is that, now.

Some of this stuff is not necessarily a mobile tweak, so I'm working on making a general small tweaks stylesheet that brings all of these in, plus some styles that I have on my personal desktop tweaks.
Removed two features because they were making the mobile experience worse instead of better, since Tumblr has updated their code and Xkit probably has also.

Source code

/* ==UserStyle==
@name         Tumblr - Mobile Tweaks
@version      20221016.22.25
@description  Tweaks for Tumblr intended for narrow screens
@author       wac
@license      MIT
@var number font-scaling "Font scaling on blog settings" [1.3, 0.1, 5, 0.1]
@var number switch-height "Switch height on blog settings" [14, "px"]
@var select underline "Underline on legacy" ["block", "none"]
@var number keyboard-offset "Keyboard Offset" 50px
==/UserStyle== */
@-moz-document domain("") {
    /* General tweaks and fixes */
    @media (max-width: 650px) {
        /* Removes "Everything okay?" paragraphs
       because my phone browser won't let me scroll to the buttons */
        .rDKIp {
            display: none;

        /* Tumblr notes update */
        [aria-label="Post Activity"] {
            /* Makes the notes box only as tall as the amount of notes it has */
            height: fit-content;
            max-height: 500px;
        .jj46W p {
            /* Makes emojis normal size */
            font-size: inherit;
            line-height: inherit;
    /* "Unsupported browser" on dashboard */
    /* This one is for Tumblr's "get the app" banner */
    /* Adblock warning -- is too big on a mobile screen, can't see the X button */
    .I6Lwl {
        display: none !important;

@-moz-document domain("") {
    /* Blogs around Tumblr */
    /* "Get The App" banner on blogs */
    /* "See what the app is for" on blogs*/
    .show-app-nag .app-nag {
        display: none;
@-moz-document url-prefix("") {
    /* Legacy settings pages tweaks */
    @media screen and (max-width: 1000px) {
        .l-container.l-container--two-column-dashboard .left_column,
        .l-container.l-container--two-column .left_column,
        .l-container {
            float: none !important;
            width: 100%;
            max-width: 90vw;
        .l-container.l-container--two-column-dashboard .right_column,
        .l-container.l-container--two-column .right_column,
        #tabs_outer_container {
            display: none;
        .tumblr_settings .settings_group .group_label,
        .featured_tags_group .group_label.flex {
            width: unset;
        .blog {
            max-width: 100%;
            flex-wrap: wrap;
        .blog :is(div, button) {
            margin: calc(10px*var(--font-scaling));
        .binary_switch {
            height: var(--switch-height);
            /* It's ugly, but it's easier to press */
        .tumblr_settings .settings_group {
            display: flex;
            flex-direction: column;
        .tumblr_settings .settings_subheading,
        .accordion_trigger_wrapper .accordion_label,
        .indash_header_wrapper .global_options .option_label,
        a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video,
        button, input, select, textarea {
            font-size: calc(14px*var(--font-scaling));
        .tumblr_settings .blocked_blogs .blog .name {
            font-size: calc(13px*var(--font-scaling));            
        .tumblr_settings .help_text, 
        .tumblr_settings .help_text a,
        .tumblr_settings .setting.text label, 
        .tumblr_settings .setting.password label, 
        .tumblr_settings .setting.textarea label {
            font-size: calc(12px*var(--font-scaling));
        .indash_header_wrapper .description {
            line-height: calc(20px*var(--font-scaling));
        .indash_header_wrapper .title .editable_text {
            line-height: calc(1.1*var(--font-scaling));
        .indash_header_wrapper .editable_text .line {
            height: calc(40px*var(--font-scaling)) !important;
            display: var(--underline);

@-moz-document domain("") {
    /* Removed Content */
    /* This code has been removed, but you can
       re-enable it by changing to */
    /* Ensures keyboard does not cover new post screen and reblog stuff */
    /* Removed: Some time ago, Tumblr updated their mobile web thing
       so that this no longer happens, or if it does, you can now at least scroll */
    .RuIGO {
        max-height: calc(90vh - var(--keyboard-offset));
        overflow-y: auto;
        overflow-x: hidden;

    /* Fix for XKit Rewritten Quick reblogs being off-screen with the new post footer layout */
    /* Pasted in the same code as the desktop stuff because that's what works 
           Update: that no longer works. The container just goes off-screen for some reason, so I set the translate horizontal thing to 0.*/
    /* Removed: This no longer works, and makes the reblog thing go off-screen */
    /* I did try fixing it with a variable but I couldn't reproduce the behaviour on
       desktop so I scrapped it. */
    #quick-reblog.above {
        bottom: unset;
        right: var(--xkit-offset);
        transform: translate(var(--xkit-offset), -50%);
    #quick-reblog.below {
        top: 100%;
        right: var(--xkit-offset);
        transform: translate(var(--xkit-offset), 0);


No reviews yet.