So, testing out some more customization for Shadows and got it working on my test site on the computer. however when I go to the Ipad, which most of my players use at the table, it looks off.
I used the CSS code Alex Redeye posted in the CSS Beta Discussion, but still no go
Any clues?
Page is HERE
What little CSS the test site has
/* TEMPORARY? WIDTH FIX */
.campaign-public-layout #content { max-width: 1280px !important; }
/*MEDIA QUERIES*/
/* SMARTPHONES (PORTRAIT AND LANDSCAPE) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* CSS HERE */
}
/* SMARTPHONES (LANDSCAPE) */
@media only screen and (min-width : 321px) {
/* CSS HERE */
}
/* SMARTPHONES (PORTRAIT) */
@media only screen and (max-width : 320px) {
/* CSS HERE */
}
/* TABLETS (PORTRAIT AND LANDSCAPE) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* CSS HERE */
}
/* TABLETS (LANDSCAPE) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* CSS HERE */
}
/* TABLETS (PORTRAIT) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* CSS HERE */
}
/* DESKTOPS AND LAPTOPS */
@media only screen and (min-width : 1224px) {
/* CSS HERE */
}
/* LARGE SCREENS */
@media only screen and (min-width : 1824px) {
/* CSS HERE */
}
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
You might not want to use
In you might want to use
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.
They are among us!
XCom: Defiance - Campaign of the Month November 2016
The percentages did it. Didnt even need the CSS stuff, which actually was crtashing OP on my ipad.
Thanks
Take a gander at the improved screens HERE , HERE, HERE, and HERE
There you go! Looking fine on my screen.
GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign
GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign
Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign
"The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius
Glad I was able to help. Now, I just need to stop being lazy and play around with dynamic images for my wiki pages.
They are among us!
XCom: Defiance - Campaign of the Month November 2016