Search code examples
cssgmailcustomizationstylish

Custom GMail CSS Prevents Click


I am using Stylish and the below CSS to customize the Multiple Inboxes Lab such that instead of the inboxes being in 1 vertical column, they are now in 2 columns with the first inbox taking over the top. The CSS does indeed work to give me the look I want.

However, for some reason I cannot discern, I am no longer able to click the emails within the inboxes. Thoughts as to why? Or how I can fix it?

/* example look */
| First Inbox |
| 2nd  | 3rd  |
| 4th  | 5th  |

/* each inbox */
.BltHke.nK {
  width: 49%;
  float: left;
  padding-right: 1%;
}

/* first inbox */
.nH.nn > .nH > .nH:first-child > .BltHke {
  width: 100%;
}

Solution

  • Thanks to Brock Adams' hint, I figured out that pieces of the lower (or original) inbox were covering up the multiple inbox space due to my float: left rules.

    To fix it, I had to float those pieces as well with the following code.

    /* fix float over multiple inbox area */
    .D.E.G-atb.bP {
        float: left;
    }
    
    .ae4.UI {
        float: left;
    }