Hi there. I don't like the formatting of the website once you click on a character's name.
It suddenly becomes zoomed in and large and obnoxious LOL
I attempted to use
body.character-show #content {max-width: 53%;}
But that doesn't work well. On my screen it was a close match to the layout of the "Characters" listing.
Basically I'd like each Character Page to have the same size as the Character List. Even if seen on a mobile device or on a smaller screen. Can this be done?
(I'm a newb with CSS, I just copy and paste from other websites and forum posts)
Just throw in the following css code
body.character-show #content {max-width: 1024px;}
I think that's the width you have for the rest of your site. It should fix everything on your character page.
EditYou might not want to use
.campaign-public-layout <a href="https://forums.obsidianportal.com/search?Search=#content&amp;Mode=like">#content</a> { max-width: 1280px !important; }
In you might want to use
body.campaign-public-layout <a href="https://forums.obsidianportal.com/search?Search=#content&amp;Mode=like">#content</a> { max-width: 1280px;}
Here is a list of each class in that you can find in the body and what they control.
But that isn't the issue, in your case the issue is fairly simple (I've got the opposite issue with my page wiki page, looks great with an iPad not as great on a wider screen) which is why I got lazy and left my wiki page narrow because I'd need to dynamically change the dimensions of a huge number of images.
You created your page to work with a max content of 1280px and gave non dynamic dimensions to heights, tops and widths, etc of an absolute image. You need that image's dimensions to be dynamic so use %'s like width: 84% top:15% etc rather than pixels. You may need to play around with the column width's of the sidebar, navbar and main-content columns and get rid of or decrease any min-widths (or non dynamic widths) they have.
It looks like you're new here. If you want to get involved, click one of these buttons!