Comments

• 

  thaen

  Posts: 1,076 July 2022

  Disclaimer ... I'm not great at CSS, so maybe one of the others around here can give better ideas.  That said ...

  https://alfmarches.obsidianportal.com/custom_css

  https://alfmarches.obsidianportal.com/wikis/spell-rulings

  It looks like there is a @media line for font-size 3.75vw in your Custom CSS.  Try changing that to 2.75vw in your Custom CSS?  When I did that in the Chrome Developer Tools, it made all of the text smaller in the "mobile" view.

  Obsidian Portal Developer
• AlfmarchesGM

  Posts: 10 July 2022

  @thaen That one is actually the solution! I was trying to find a way to delete this post a few days ago. 

  This CSS section:

  
  @media only screen and (max-width: 800px) and (orientation: portrait) {
    body {
      font-size: 3.75vw;
    }
  }
  
  @media only screen and (max-width: 800px) and (orientation: landscape) {
    body {
      font-size: 3.9vh;
    }
  }

  Is what solved it for my case. We use a lot of headings and they were taking half the screen! Tinkered with it along with my players and found these were what helped us get to the look we wanted on mobile.
• 

  thaen

  Posts: 1,076 July 2022

  Awesome!  Thanks for sharing that knowledge!

  Obsidian Portal Developer