How exactly do I create themes / CSS snippets for mobile (iPhone and iPad)? Desktop has dev tools but I'm not sure what to do for mobile

Things I have tried

I looked through and did a bunch of searches on r/obsidian, Google, and the forums, and have not figured how to go about writing CSS. On Desktop, I can open Chrome Developer tools and inspect each element to write CSS, but there doesn’t seem to be a way to do this for iOS. I have a desktop CSS snippet but when applying it to iOS, it hides a bunch of elements and looks broken.

I want to change the look of lots of UI sections, including the tab section on iPad and its baffling that I can’t find any resources or answers to this.

I believe you want to run (and in your Obsidian dev tools console to emulate mobile (and return to desktop mode).


Even in fullscreen on my 13’’ MacBook Air, it only emulates a phone ui. How can I make it emulate the iPad UI with the tabs and sidebar buttons on top?

Have you toggled the device toolbar in your dev tools, and then set dimensions appropriate for the device you’re emulating? I just tried iPhone SE dimensions vs iPad Air dimensions and I get very different results, so it looks like Obsidian is correctly handling the difference between the two devices via breakpoints.

That worked, thank you!

@geoffb I thought I wouldn’t have anymore questions but I do:

Would you know how to show the bottom bar on iPhone in the mobile emulation?

As well as the this bottom white section on iPad when I edit text using the iPad Magic Keyboard?

@geoffb I looked up and found this page: Develop for mobile devices | Obsidian Plugin Developer Docs which shows a command for toggling the mobile UI on and off:!;

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.