Phil's Computer

En Fr

Bothered by a Site's Layout? Change it!

A site's objective doesn't always match yours, but you know once a page falls on your browser, it's now yours to tweak
May 19 2019 04:00 AM

How many websites, websites you visit daily, have a layout that simply doesn't work for you? Well if it's in your browser, it's yours now!

The ones I've wrestled with are Facebook and Twitter. These socials are not on your team, designed with addictive patterns, they exist to sell ads. But you can fight back, and I've thrown a first jab in with just a few lines of css.

The problem I had with Twitter and Facebook relates to their photos, I found the imgs took too much visual attention. So using User CSS or User Javascript and CSS, I gave those sites' photo blocks a short max-height that resumes to their default heights on :hover.

Here are the few lines of css I wrote for Twitter:


.AdaptiveMedia-container, .card2 { max-height: 20px; min-height: 0 !important; overflow: hidden; } .tweet:hover .AdaptiveMedia-container, .tweet:hover .card2 { max-height: 510px; }

The before and after speaks for itself, try it. Did you notice a taming of the ads, do you feel less emotionally taxed? Freeing isn't?

Here's my sheet for Facebook:


[role="feed"] [role="article"] .mbm { max-height: 90px; overflow: hidden; } [role="feed"] [role="article"]:hover .mbm { max-height: none; }

Let me know which tweaks have made it on your user sheets!

← Back to Articles