I’m trying to modify some of the CSS on the outlook.com OWA webmail interface.
I have pretty poor vision so everything on my screen is fairly large. I need to make the most of my limited screen real estate and can’t afford to waste too much white space.
See end of this post for pic of how page looks without modification as they will only let me post one pic.
I would like to make the subject column wider and have the date right justified all the way on the right of my screen.
I can drag the ‘from’ divider to make it larger or smaller, but the ‘subject’ divider is at the max it will let me drag to. I think that may be a flex-shrink/grow thing.
I have a browser plug-in that lets me modify the CSS for specific web sites, so I hoping that I can make the Webmail UI a little more productive for my screen.
Using my browsers DOM inspector I was able to locate some of the CSS elements but still can’t get everything to format as needed.
The subject column selector is .TtcXM
and I added the border, larger width and flex to it.
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-style: solid;
border-width: 1px;
width: 590px
flex-shrink: 0;
The received column selector is .hwyHQ
padding-left: 1px;
text-align: right;
border-style: solid;
border-width: 1px;
max-width: 9ch;
position: relative;
left: 52px;
Again, see end of this post for how page looks after my modifications.
I’m not sure where the right side of those boxes is. It doesn’t appear to be be covered by anything. I tried changing the z order, but didn’t help.
I’m not a CSS expert and things are very nested and way above my pay grade. Some help with this would be appreciated. If there is a different way to do this please don’t think you need to work with my CSS. I’m interested in a final result, not necessarily getting my bad code to work.
Thanks
