I want to view WhatsApp web in a narrow window next to my other windows. Therefore I want to shrink or toggle the contacts sidebar.
- Download Stylus (for Chrome or Firefox)
- Click Stylus icon from the toolbar, click "Manage"
- Click "Write new style", click "Import"
Copy the text below to text box:
@-moz-document domain("web.whatsapp.com") { .k1feT { flex-basis: 80px !important; } }
- Click "Overwrite Style"
- Enter a name for your style (e.g. "Whatsapp")
- Click "Save", refresh Whatsapp Web page.
-
This gave me the right idea. I changed the css a bit:
.k1feT { flex: 0 0 30% !important; } ._1Iexl { flex: 0 0 70% !important; } ._3dqpi { min-width: 0px !important; }
. Now I have a responsive WhatsApp Web that I can view on a small screen. – Benjamin Ziepert Jul 27 '18 at 8:25
Had to change the css again:
._2NwAr {
flex: 0 80px !important;
}
._1eNef {
display: none;
}
._2Evw0 {
padding-left: 0px !important;
}
.VOr2j {
margin-left: -30px !important;
}
-
Or if you want to see your burger menu and the "new chat" button
._2NwAr { flex: 0 80px !important; }; ._3nLE_ { left: -30px; overflow: unset; }; html[dir] ._2wfYK { padding: 0px; }; ._2Evw0 { padding-left: 0px !important; }; .VOr2j { margin-left: -30px !important; };
– Tobias Dec 11 '20 at 9:57 -
1the CSS will keep changing, dont believe this will be a definitive answer – Sathyajith Bhat♦ Dec 14 '20 at 21:46