MediaWiki:Common.css: Difference between revisions

From Rejoice in the Catholic Faith
No edit summary
No edit summary
Line 69: Line 69:


/* it seems to make mobile lose padding on edges; so to override for small screens: */
/* it seems to make mobile lose padding on edges; so to override for small screens: */
@media screen and (max-width: 650px) {
.ns-3000 #bodyContent @media screen and (max-width: 650px) {
     #Content {
     #content {
         max-width: none; /* Remove the max-width constraint on small screens */
         max-width: none;   /* Remove the max-width constraint on small screens */
        padding: 0 10px;    /* Add padding to ensure text doesn't touch the screen edges */
        margin: 0 10px;    /* Optional: Add margin to control the distance from the screen edges */
     }
     }
}
}

Revision as of 09:14, 23 May 2024

/* CSS placed here will be applied to all skins */


/* a class that will keep a header from appearing in the TOC on the page */
.noautonum .tocnumber {
    display: none;
}


/* so that the tagline will show in all skins */
#siteSub {
  display:block;
  font-weight:normal;
  font-size:normal;
}


/* so that columns won't spread all the way across the page */
/* see Books of the Bibles entry */
div#columns {
  max-width: 450px;
}


/* enlarge text size */
body {
    font-size: 115%;
}


/* creating class to have padding between table columns */
.table-padding td {
    padding: 25px;
}

/* creating class to have padding between table columns, right side only */
.table-padding-right td {
    padding: 25px;
}


/* for expand/collapse */
.mw-collapsible span.mw-collapsible-toggle {
    float:none; !important
    font-weight: bold;
    background-color: #ffff00;
    margin-left:25px;
}


/* 5/15/24: text in <pre> does not wrap on Reading mode in Edge browser, and assume in others and extends past right margin; but doesn't work; the only thing that works is max-width: 80% which is good to limit the whitespace block, but on read mode it just extends off the page... none of these worked:
    overflow: visible;
    nowrap: normal;
    max-width: 80%;
    display: inline-block;
    white-space: normal;
*/

pre {
    max-width: 80%;
}


/* Set max width and adjust background */
.ns-3000 #bodyContent {
    max-width: 850px; /* Adjust the value as needed */
    margin: 0 auto; /* Center the content */
}

/* it seems to make mobile lose padding on edges; so to override for small screens: */
.ns-3000 #bodyContent @media screen and (max-width: 650px) {
    #content {
        max-width: none;    /* Remove the max-width constraint on small screens */
        padding: 0 10px;    /* Add padding to ensure text doesn't touch the screen edges */
        margin: 0 10px;     /* Optional: Add margin to control the distance from the screen edges */
    }
}