Skip to content

Instantly share code, notes, and snippets.

@kzu

kzu/whatsapp.css

Last active July 6, 2025 23:17
Show Gist options
  • Save kzu/51fe3d6084fe96f6c79c0f284dc33fa6 to your computer and use it in GitHub Desktop.
Save kzu/51fe3d6084fe96f6c79c0f284dc33fa6 to your computer and use it in GitHub Desktop.
Download ZIP
WhatsApp full width replies
Raw
whatsapp.css
/* side bar */
header.xa1v5g2 {
background-color: grey;
display: none;
}
/* whatsapp text, new convo */
._aigw header {
display: none;
}
/* contacts pane */
._aigw div {
font-size: small;
}
/* response messages */
.message-in {
/* background-color: grey; */
}
/* response message content */
.message-in div {
max-width: 100%;
}
/* WhatsApp for Windows ad */
div.xyj1x25 {
display: none;
}
@kzu
Copy link
Author

kzu commented Jul 6, 2025 •
edited
Loading

This style, applied via a browser extension that can apply CSS to a website (I use https://stylebot.dev/), will make the following changes to web.whatsapp.com:

  1. Hide the top and side bars:

image

  1. Make the font size of the contacts pane smaller
  2. Make response messages full width depending on their content (no more smaller bubbles with looong text)

Before:
image

After:
image

  1. Remove the ad to get WhatsApp for Windows

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment