MediaWiki:Common.css: Difference between revisions

From Regenerate Willamette Valley
mNo edit summary
Tags: Manual revert Reverted
No edit summary
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* 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 */
}

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 */
}