User:Becasita/test.css
Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: hold down Ctrl and click the Refresh or Reload button. Firefox: hold down ⇧ Shift while clicking Reload (or press Ctrl+⇧ Shift+R). Google Chrome and Safari users can just click the Reload button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/**********************
** Main page stuff! **
**********************/
/*****************
* Main container.
*/
#mp { display: flex; }
/* Left/Right containers. */
.mp-left, .mp-right
{
display: flex;
flex-direction: column;
margin: 0 0.2em;
}
/* Right container. */
.mp-right
{ /* Fixed max width. */
max-width: 25em;
}
/* Header. */
.main_page-header {
background-color: #337C97;
color: white;
margin: 0.75em 0 0.1em !important;
border-radius: 0.25em;
}
.main_page-header span {
margin: 0 0.35em;
}
/* Content. */
.main_page-content {
padding: 0 0.6em;
}
/*************
* Characters.
*/
#characters-info dd { display: inline-block; }
#characters-info ul {
display: inline;
margin: 0;
}
#characters-info li { display: inline-block; }
.characters {
margin: auto;
display: table;
}
.character { display: inline-block; }
/* Screens with max-width of 1000px (might need to be changed) */
@media screen and (max-width: 1000px)
{
/* Main container. */
#mp
{ /* Display block, to make stuff linear, instead of side-by-side. */
display: block;
}
/* Right container. */
.mp-right
{ /* Unset the max width limitation. */
max-width: unset;
}
}
@media screen and (max-width: 635px)
{
.characters-top, .characters-bottom
{ /* Display vertical inline, basically. */
display: grid;
}
}