Have you also payed a whole lot of money for an extra large monitor and have you asked yourself why you only get a narrow timeline at so many so-called social media websites?

Here comes a CSS hack to change the layout of twitter to a flexible card design.

pros

• 300% more tweets per screen
• 300% less scrolling to get the tweets

cons

• a few overlapping cards
• dosn't work anymore after twitter’s redesign 2019 – but you can install a browser extension to keep the former engine alive: GoodTwitter

All this is work in progress and a working proof of concept; and I like to get your feedback on the idea.

twitter flex layout CSS

/* ===== Twitter flex layout v1.1 ===== */ /* copyright Matthias Müller-Prove, mprove.de, 9-Jun-2017, 27-Apr-2020 */ /* you are free to use for non-commercial purposes */ body.three-col .wrapper { width:98% !important; } body.three-col .AppContainer { min-width: 100%; } body.three-col .AppContent-main{ max-width: 100% !important; } body.three-col AppContent-main>.Grid--withGutter, body.three-col #page-container { display: -webkit-flex !important; display: flex !important; -webkit-flex-flow: row wrap !important;; flex-flow: row wrap !important;; } body.three-col .Grid-cell:nth-child(1), body.three-col .wrapper-search AppContent-main>.Grid--withGutter>.Grid-cell:nth-child(1), body.three-col .dashboard-left { -webkit-order:1; order:1; } body.three-col .Grid-cell:nth-child(2), body.three-col .wrapper-search AppContent-main>.Grid--withGutter>.Grid-cell:nth-child(2), body.three-col .content-main { -webkit-order:3; order:3; width: 100% !important; } .u-lg-size2of3 { min-width: 100%; } body.three-col .Grid-cell:nth-child(3), body.three-col .wrapper-search AppContent-main>.Grid--withGutter>.Grid-cell:nth-child(3), body.three-col .dashboard-right { -webkit-order:2; order:2; } .Trends.module.trends{ height:111px; overflow: scroll } body.three-col ol#stream-items-id { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: baseline; /* Safari */ align-items: baseline; -webkit-align-content: stretch; /* Safari */ align-content: stretch; } body.three-col ol#stream-items-id li { display: inline-block; max-width:520px; } body.three-col .stream-item:not(.no-header-background-module) { -webkit-box-shadow: #ccc 2px 2px 5px; -moz-box-shadow: #ccc 2px 2px 5px; box-shadow: #ccc 2px 2px 5px; } body.three-col .AdaptiveMedia-photoContainer img { top:0 !important; } body.three-col .Footer.module.roaming-module { display:none; } .promoted-tweet, .standalone-ad-container /* tumblr */ { background-color: #e9f4ff !important; } /* message check mark */ .is-seen span:before { font-weight: bold; font-size: 200%; }

how to apply the design hack?

You can apply the design hacks in your desktop browser:

Chrome and Firefox

Install GoodTwitter browser extension

Use Stylish for Chrome or Stylish for Firefox and copy the code.

Safari

Create a local younameit.css file and copy the the css code into the new file.

Activate your custom styles at Safari > Settings > Advanced > Style sheet

Feedback – please leave a message

comments powered by Disqus

à propos

• protonet design hacks
• Tagesjournal desgin hacks