Setting Text Resizing throughout Page

AlfmarchesGM

Hello!

THe OP Page for our campaign is looking great for what we want on PC, but on mobile we've been having a few hiccups. The main one is how big the text is on the screen - we'd rather the text scaled down to size with mobile options (by width, perhaps?) instead of staying a fixed size.

An example to illustrate, using a middle/low-end smartphone but that illustrates the issue we've had:

image

Is there a way to make this work for the whole campaign page? Thanks.

Comments

  • thaen
    thaen
    Posts: 953

    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: 9

    @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
    thaen
    Posts: 953

    Awesome!  Thanks for sharing that knowledge!

    Obsidian Portal Developer

Sign In or Register to comment.

August 2022
In Over Their Heads

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions