Skip to content

Instantly share code, notes, and snippets.

@luca-c-xcv
Last active March 16, 2025 23:58
Show Gist options
  • Save luca-c-xcv/307b009c91e81e19429cc021a6d81243 to your computer and use it in GitHub Desktop.
Save luca-c-xcv/307b009c91e81e19429cc021a6d81243 to your computer and use it in GitHub Desktop.
responsive Whatsapp Web

Responsive Whatsapp Web

Description

Whatsapp Web is a Whatsapp client with a frontend in HTML, CSS and JS. If you are using it in a browser or in a service collector and you want use it in a small window while maintaining a good levels of usability you can inject this CSS into your browser's tab or service.

Spec

Up to 900px wide the chat list is shown with the profile photos of the contacts, only if you hover over the list the message preview appears and the chat space occupies the remaining space. Above 900px the UI is the default interface.

code

@media screen and (max-width: 900px)
	{
		._1XkO3 
			{
				min-width: 500px !important;
			}
		.two ._3RGKj 
			{
				flex: 0 0 80px !important;
				max-width: 80px !important;
			}
		.two:hover ._3RGKj:hover 
			{
				flex: 0 0 45% !important;
				max-width: 45% !important;
			}

		.uwk68, 
		.dsh4tgtl.e1gr2w1z.bsvz8e3l.hmy10g0s.cw3vfol9, 
		._3yZPA, 
		._1Yy79._1-SiY, 
		._3OvU8
			{ 
				display: none !important;
			}
		
		.two:hover ._3RGKj:hover > ._1KDb8 > .uwk68, 
		.two:hover ._3RGKj:hover > ._1KDb8 > div > div > div > .dsh4tgtl.e1gr2w1z.bsvz8e3l.hmy10g0s.cw3vfol9, 
		.two:hover ._3RGKj:hover > header >._3yZPA, 
		.two:hover ._3RGKj:hover > span > div > div > ._1Yy79._1-SiY, 
		.two:hover ._3RGKj:hover > div > div > div > div > div > div > div > div > div > ._3OvU8
			{ 
				display: block !important;
			}
	}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment