MediaWiki:Citizen.css: Difference between revisions

Revision as of 03:02, 5 February 2026

/* Default: Full width */
:root.citizen-feature-custom-width-clientpref-standard,
:root {
	--width-layout: 100vw;
}

/* Override for specific pages using body class */
.page-Main_Page,
.page-Hauptseite {
	--width-layout: 1600px;
}

/* Mobile fixes - prevent horizontal overflow */
@media (max-width: 768px) {
	body {
		overflow-x: hidden !important;
	}

    :root.citizen-feature-custom-width-clientpref-full,
      :root {
	    --width-layout: 100%;
      }
	
	.mw-page-container,
	.page-Container,
	.mw-body,
	.mw-body-content {
		max-width: 100vw !important;
		overflow-x: hidden !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	/* Fix for full-width elements causing overflow */
	* {
		max-width: 100%;
	}
	
	/* Reset any fixed positioning that might cause issues */
	.home-header,
	.mw-parser-output {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}
}

/* Fix Citizen mobile layout - content shifted right */
@media (max-width: 999px) {
	/* Reset page container positioning */
	.mw-page-container {
		position: relative !important;
		left: 0 !important;
		right: 0 !important;
		transform: none !important;
		margin: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* Reset content wrapper */
	.mw-content-container,
	.mw-body {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	
	/* Fix any transform/translate issues */
	body {
		overflow-x: hidden !important;
	}
	
	html {
		overflow-x: hidden !important;
	}
}

@media (max-width: 999px) {
	.mw-page-container,
	.mw-content-container,
	.mw-body,
	.mw-body-content,
	.parsoid-body,
	.mw-parser-output {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
		margin: 0 !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		box-sizing: border-box !important;
	}
	
	/* Remove any container width limits */
	.citizen-page-container,
	.citizen-body-container {
		width: 100% !important;
		max-width: none !important;
	}
	
	/* Ensure content uses full available space */
	#content {
		width: 100% !important;
		max-width: 100% !important;
	}
}