Skip to content

Instantly share code, notes, and snippets.

@selimhex
Forked from Axenide/responsive-whatsapp-web.md
Last active July 6, 2025 12:55
Show Gist options
  • Save selimhex/164dc08cf89d5f078bac1edfb57a5cb5 to your computer and use it in GitHub Desktop.
Save selimhex/164dc08cf89d5f078bac1edfb57a5cb5 to your computer and use it in GitHub Desktop.
Responsive UI for WhatsApp Web.

Responsive WhatsApp Web

Using Stylus and adding this CSS will get you a responsive UI for WhatsApp Web (which I think is long overdue, come on Meta).

/* magic number roughly meaning mobile-ish in my laptop*/
@media (max-width: 820px) {
	#app > div > div:last-child > header {
		display: none;
	}
	div:has(> #side):not(:hover) {
		max-width: 98px !important;
	}
	#side div:nth-child(2) {
		flex-wrap: nowrap !important;
	}
	#app > div > div:last-child > div {
		min-width: unset !important;
	}
	#app > div > div:last-child > div:has(> header > header) > header > header {
		display: none !important;
	}
	div:has(> #side):not(:hover) [role="gridcell"] {
		translate: -36px;
	}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment