Adaptive 3 Column Character Layout

Unknown

So, I just figured I would share this here for folks to play with. I don't remember where exactly I originally saw the 3 Column Layout for the Characters page, but it always had the issue that if you used it and people loaded the site on a portable device it would make it impossible to load up the character page as all you would see was the picture and the actual link (their name) would be hidden.

To get around this I have modified the CSS for it very mildly so that the 3 Column style is only applied if the size of the browser is large enough to properly compensate it while leaving the default mobile layout in tact. Here is the CSS for it:

/* CHARACTERS SECTION */
/* TARGET DESKTOPS AND LAPTOPS */
@media only screen
and (min-width : 1224px) {
/* 3 COLUMNS */
.character-list-item-container {
position:relative !important;
width:33.33% !important;
height:125px !important;
display:inline;
clear:none !important;
color:transparent;
}
}
/* END DESKTOP AND LAPTOP */

--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/

GamingMegaverse

The 3 column layout was initially Kallak's creation for his awesome "Dangerous Kalamar":https://dangerous-kalamar-4.obsidianportal.com/

Unknown

Hmm, I actually think that is a different method than the one I updated here (one I am still considering using, but the whole line per character bit has me not wanting to dig into it just yet since I have a ton of characters generated already). Digging around I see I actually originally got the code from "Pils":https://www.obsidianportal.com/profile/Pils on their "Dark Sun":https://dark-sun-a-trova.obsidianportal.com/ page. Granted, I may well still have been developed by Kallak originally, but that is not the one he shared up (4 column and with just picture and name on the picture--this method retains the normal OP look but spreads across three columns instead of two).

Either way, someone else originally contributed that, I just modified it to be more respective of mobile devices.

--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/