MediaWiki:Common.css: Difference between revisions

From Regenerate Willamette Valley
No edit summary
No edit summary
 
Line 10: Line 10:


/* For the welcome page cover image */
/* For the welcome page cover image */
.welcome-cover-image-container {
.scaled-image-container {
     width: 100%; /* Make the container use the full available width of its parent */
     width: 100%; /* Make the container use the full available width of its parent */
     margin-top: 1em; /* Optional: space above the image */
     margin-top: 1em; /* Optional: space above the image */
Line 17: Line 17:
}
}


.welcome-cover-image-container img {
.scaled-image-container img {
     max-width: 100%;  /* THIS IS KEY: Image will not be wider than its container */
     max-width: 100%;  /* THIS IS KEY: Image will not be wider than its container */
     height: auto;    /* Maintain aspect ratio, preventing distortion */
     height: auto;    /* Maintain aspect ratio, preventing distortion */

Latest revision as of 17:02, 20 May 2025

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

.mw-parser-output {
    white-space: normal; /* Default for standard paragraphs */
}
.mw-parser-output pre, .mw-parser-output code {
    white-space: pre-wrap; /* Preserve whitespace only for preformatted or code blocks */
}


/* For the welcome page cover image */
.scaled-image-container {
    width: 100%; /* Make the container use the full available width of its parent */
    margin-top: 1em; /* Optional: space above the image */
    margin-bottom: 1em; /* Optional: space below the image */
    overflow: hidden; /* Ensures the container itself doesn't cause overflow if image somehow exceeds it before scaling */
}

.scaled-image-container img {
    max-width: 100%;  /* THIS IS KEY: Image will not be wider than its container */
    height: auto;     /* Maintain aspect ratio, preventing distortion */
    display: block;   /* Removes extra space below the image if it's treated as inline */
    margin-left: auto;  /* Optional: Centers the image if it's smaller than 100% max-width (e.g., on very wide screens) */
    margin-right: auto; /* Optional: Centers the image */
}