Mobile CSS Sibebar and Settings Background colors

[lousytrybrian]

Things I have tried

I made snippets for desktop and nearly all of them work on mobile except all the sidebars and settings background colors.

What I’m trying to do

I just want my menus to look the same as on desktop, but it seems like maybe Mobile menus and sidebars have different CSS I guess? I just don’t know how to see them.

[JimK]

Hi @lousytrybrian

I found some references to “.is-mobile.is-ios” for a lot of things in the app.css file from Obsidian. here are some that may or may not be what you are looking for:

.is-mobile .menu {
  max-height: calc(100% - 100px);
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  min-width: unset;
  position: absolute;
  bottom: 0;
  border-radius: 6px 6px 0 0;
  padding: 10px 20px;
  left: 10px !important;
  top: unset !important;
  overflow-y: auto;
}
.is-mobile .menu-item {
  font-size: 18px;
  padding: 12px 16px;
  height: unset;
  line-height: unset;
}

.is-mobile .modal.mod-settings {
  background-color: var(--background-primary);
}
.is-mobile .modal.mod-settings .vertical-tab-header,
.is-mobile .modal.mod-settings .vertical-tab-nav-item {
  background-color: var(--background-primary);
}

Maybe some of those will help you? There are over 150 tagged with is-mobile.

If not I don’t know if I am allowed to post the app.css file here, but I could tell you how to extract it from the obsidian files if you are on windows (though it’s probably similar for Mac and Linux, I’m just too lazy to check).